:root{
  --ink:#1a1a1a;--cream:#fbf6ea;
  --pink:#ffb3d1;--orange:#ffc58a;--yellow:#ffe58a;--green:#a8e6b8;--blue:#9fd3ff;--purple:#d3b3ff;
  --rainbow:linear-gradient(90deg,#ff6b6b,#ffa94d,#ffe066,#69db7c,#4dabf7,#b197fc);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:'Quicksand',system-ui,sans-serif;font-weight:600;color:var(--ink);background:var(--cream);
  display:grid;place-items:center;overflow:hidden}
.page-bg{position:fixed;inset:0;overflow:hidden;pointer-events:none}
.page-bg svg,.deco svg{position:absolute}

/* cartão central */
.card{position:relative;width:min(calc(100vw - 20px),430px);height:min(calc(100dvh - 20px),840px);
  border:2px solid var(--ink);border-radius:30px;overflow:hidden;background:#fff;
  box-shadow:0 6px 0 rgba(0,0,0,.12),0 24px 60px rgba(120,80,160,.25)}
#confetti{position:absolute;inset:0;z-index:30;pointer-events:none}
.progress{position:absolute;top:12px;left:18px;right:18px;display:flex;gap:6px;z-index:20}
.progress span{flex:1;height:5px;border-radius:9px;background:rgba(0,0,0,.12);transition:background .4s}

.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:34px 22px 26px;text-align:center;opacity:0;transform:translateY(20px);pointer-events:none;
  transition:opacity .45s,transform .45s}
.screen.active{opacity:1;transform:none;pointer-events:auto}
.screen.out{transform:translateY(-20px)}
.screen[data-bg=stars]{background:var(--cream)}
.screen[data-bg=gingham]{background-color:#fff;
  background-image:linear-gradient(90deg,rgba(122,174,235,.4) 50%,transparent 50%),linear-gradient(rgba(122,174,235,.4) 50%,transparent 50%);
  background-size:44px 44px}
.deco{position:absolute!important;inset:0;overflow:hidden;pointer-events:none;z-index:0!important}
.screen>:not(.deco){position:relative;z-index:1}

.tag{font-size:1.05rem;letter-spacing:.04em}
.title{font-family:'Caveat',cursive;font-weight:700;font-size:clamp(2.4rem,11vw,3.3rem);line-height:1}
.title.small{font-size:clamp(2rem,9vw,2.6rem)}
.hl{background:var(--rainbow) bottom/100% 8px no-repeat;padding-bottom:4px}
.sub{max-width:28ch;font-size:1rem;line-height:1.35}
.emoji-big{font-size:5rem;animation:bob 2.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-10px) rotate(4deg)}}
.big{font-family:'Caveat',cursive;font-weight:700;font-size:clamp(7rem,38vw,10rem);line-height:.85;
  background:var(--rainbow);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:2px var(--ink);animation:slide 6s linear infinite}
@keyframes slide{to{background-position:200% 0}}

/* botão pílula */
.pill{font:inherit;font-weight:700;font-size:1.05rem;color:var(--ink);background:#fff;border:1.5px solid var(--ink);border-radius:999px;
  padding:.7rem 1.5rem;cursor:pointer;box-shadow:0 3px 0 rgba(0,0,0,.85);transition:transform .15s,box-shadow .15s}
.pill:hover{transform:scale(1.05)}
.pill:active{transform:translateY(3px);box-shadow:0 0 0 rgba(0,0,0,.85)}
.pill.small{font-size:.9rem;padding:.5rem 1.1rem}
.row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;min-height:56px;align-items:center}
#btnNo{transition:transform .25s}
.sticker-msg{font-family:'Caveat',cursive;font-size:1.5rem;min-height:1.8rem}

/* polaroid */
.polaroid{position:relative;background:#fff;padding:10px 10px 8px;border:1.5px solid var(--ink);border-radius:6px;
  transform:rotate(-3deg);box-shadow:0 6px 0 rgba(0,0,0,.12);width:min(210px,52vw)}
.polaroid img{width:100%;aspect-ratio:1;object-fit:cover;object-position:50% 40%;display:block;border:1px solid rgba(0,0,0,.2)}
.polaroid .cap{display:block;font-family:'Caveat',cursive;font-size:1.5rem;margin-top:4px}
.tape{position:absolute;top:-12px;left:50%;width:84px;height:24px;transform:translateX(-50%) rotate(4deg);
  background:linear-gradient(90deg,rgba(255,107,107,.75),rgba(255,169,77,.75),rgba(255,224,102,.75),rgba(105,219,124,.75),rgba(77,171,247,.75),rgba(177,151,252,.75))}

/* bolo */
.note{background:#fff;border:1.5px solid var(--ink);border-radius:18px;padding:16px 18px;font-size:1.15rem;line-height:1.35;
  box-shadow:0 4px 0 rgba(0,0,0,.85);max-width:300px;transform:rotate(-1.5deg)}
.note.final{transform:rotate(1deg);padding:20px 18px}
.note.final p{margin-top:10px}
.cake-btn{font-size:9rem;line-height:1;background:none;border:0;cursor:pointer;animation:pulse 1.4s ease-in-out infinite;filter:drop-shadow(0 8px 0 rgba(0,0,0,.12))}
@keyframes pulse{50%{transform:scale(1.13) rotate(-3deg)}}

/* post-its */
.posts{flex:1;min-height:0;width:100%;overflow-y:auto;display:flex;flex-direction:column;gap:20px;padding:14px 6px 6px;text-align:left}
.post{position:relative;padding:18px 16px 14px;border:1.5px solid var(--ink);border-radius:4px;transform:rotate(var(--rot));
  box-shadow:0 4px 0 rgba(0,0,0,.15);background:var(--c);flex:none}
.post::before{content:"";position:absolute;top:-11px;left:50%;width:62px;height:20px;transform:translateX(-50%) rotate(-3deg);background:rgba(255,255,255,.7);border:1px solid rgba(0,0,0,.15)}
.post p{white-space:pre-line;font-size:.98rem;line-height:1.4}
.post .by{display:block;margin-top:8px;font-family:'Caveat',cursive;font-size:1.5rem}

/* bandeiras */
.flags{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;width:100%;max-width:320px}
.flag{aspect-ratio:3/2;border:2px solid #fff;border-radius:4px;box-shadow:0 0 0 1.5px var(--ink),0 4px 0 rgba(0,0,0,.2);animation:wave 3s ease-in-out infinite alternate}
.flag:nth-child(2n){animation-delay:-.8s}.flag:nth-child(3n){animation-delay:-1.6s}
@keyframes wave{from{transform:rotate(-5deg)}to{transform:rotate(5deg) translateY(-4px)}}
.flag-mini{position:absolute;width:30px;height:20px;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.5);border-radius:2px;opacity:.9}

@media(max-height:700px){.polaroid{width:150px}.big{font-size:6rem}.cake-btn{font-size:6.5rem}.emoji-big{font-size:3.5rem}}

.pill:disabled{opacity:.45;cursor:default;transform:none;box-shadow:0 3px 0 rgba(0,0,0,.4)}

.polaroid.wide{width:min(250px,66vw);transform:rotate(2deg)}
.polaroid.wide img{aspect-ratio:4/3;object-position:50% 50%}
.polaroid.wide .cap{font-size:1.3rem}
#screenFinal{gap:12px}
#screenFinal .flags{max-width:260px;gap:8px}
@media(max-height:760px){.polaroid.wide{width:190px}#screenFinal .note.final{padding:12px 14px}#screenFinal .title{font-size:2rem}}