/* Monito Monita – family app */
*{box-sizing:border-box}
html,body{margin:0}
body{background:#DEDAD8;color:#2A2622;font-family:'Figtree',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#B3261E}
button{font:inherit}
[hidden]{display:none!important}

.app{position:relative;max-width:430px;margin:0 auto;overflow:hidden;
  min-height:max(100vh,760px);min-height:max(100dvh,760px);
  background:
    radial-gradient(ellipse 75% 45% at 32% 38%,#FCFBFA 0%,rgba(252,251,250,0) 100%),
    radial-gradient(ellipse 70% 30% at 40% 100%,#F4E7D2 0%,rgba(244,231,210,0) 100%),
    linear-gradient(160deg,#EEECEB 0%,#DEDAD8 55%,#CCC7C4 100%);}

/* ---------- decorations ---------- */
.deco{position:absolute;pointer-events:none}
.snow{inset:0;overflow:hidden}
.flake{position:absolute;top:0;border-radius:50%;background:#fff;box-shadow:0 0 6px 2px rgba(255,255,255,.9);
  animation:mm-snow linear infinite}
.sparkles{inset:0;width:100%;height:100%}
.snowflake{right:-22px;bottom:120px;width:120px;height:120px}
.view-pick .snowflake{display:none}
.branch{top:0;right:0;width:390px;height:260px}
.bauble{border-radius:50%}
.bauble.one{top:116px;right:56px;width:68px;height:68px;
  background:radial-gradient(circle at 34% 30%,#fff 0 7%,#F8CF6A 20%,#D9822B 55%,#7E3410 100%);box-shadow:0 10px 18px rgba(60,40,30,.25)}
.bauble.two{top:150px;right:-10px;width:82px;height:82px;
  background:radial-gradient(circle at 34% 30%,#fff 0 7%,#8FE6D6 20%,#2E8C9A 50%,#4B2A7B 100%);box-shadow:0 12px 20px rgba(60,40,30,.25)}
.cap{width:14px;height:10px;border-radius:2px;background:#C9962B}
.cap.one{top:108px;right:83px}
.cap.two{top:142px;right:25px}
.twinkle{animation:mm-twinkle 2.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}

.deco-gift{top:500px;right:-84px;width:200px;height:190px;transform:rotate(-14deg) scale(.62);transform-origin:0 0}
.candle{top:624px;left:34px;width:64px;height:64px;border-radius:50%;
  background:radial-gradient(circle,#FBF8F1 0 58%,#E6E7EA 62%,#B9BDC3 100%);box-shadow:0 8px 14px rgba(60,40,30,.22)}
.candle .wick{position:absolute;left:30px;top:26px;width:4px;height:8px;border-radius:2px;background:#3B302A}
.candle .flame{position:absolute;left:26px;top:6px;width:12px;height:22px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:#FFC24A;box-shadow:0 0 18px 8px rgba(255,200,90,.55);animation:mm-flame 1.2s ease-in-out infinite;transform-origin:50% 100%}

/* the gift (used big and small) */
.gift{position:absolute;width:200px;height:190px;transform-origin:50% 100%}
.gift .body{position:absolute;left:12px;top:58px;width:176px;height:132px;border-radius:6px;
  background:repeating-linear-gradient(135deg,#C42D24 0 9px,#A9221B 9px 18px);box-shadow:0 22px 30px rgba(60,40,30,.3)}
.gift .body .ribbon{left:74px}
.gift .shade{position:absolute;left:0;top:0;width:100%;height:10px;background:rgba(0,0,0,.16)}
.gift .lid{position:absolute;left:0;top:20px;width:200px;height:46px;transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .7s ease}
.gift .lid-face{position:absolute;inset:0;border-radius:6px;background:repeating-linear-gradient(135deg,#D0352B 0 9px,#B3261E 9px 18px);box-shadow:0 6px 10px rgba(0,0,0,.15)}
.gift .lid .ribbon{left:86px}
.ribbon{position:absolute;top:0;width:28px;height:100%;background:linear-gradient(90deg,#C3C6CC,#fff 50%,#C3C6CC)}
.loop{position:absolute;top:-38px;width:58px;height:44px;border:11px solid #EEEFF2;box-shadow:0 2px 4px rgba(0,0,0,.18)}
.loop.l{left:44px;border-radius:50% 50% 10px 50%;transform:rotate(-18deg)}
.loop.r{left:98px;border-radius:50% 50% 50% 10px;transform:rotate(18deg)}
.knot{position:absolute;left:87px;top:-12px;width:26px;height:20px;border-radius:7px;background:linear-gradient(90deg,#C3C6CC,#fff 50%,#C3C6CC)}

/* ---------- layout ---------- */
.screen{position:relative;z-index:3;min-height:inherit;display:flex;flex-direction:column}
.welcome{padding:200px 28px 32px}
.pick{padding:20px 24px 32px}
.box{padding:84px 24px 32px}
.reveal{padding:236px 24px 28px}
.grow{flex-grow:1}

.topbar{position:absolute;top:16px;left:0;right:0;z-index:5;height:48px;padding:0 12px 0 20px;display:flex;align-items:center;justify-content:space-between}
.brand{font-family:'DM Serif Display',Georgia,serif;font-size:22px;color:#2A2622}
.userpill{display:flex;align-items:center;gap:2px;padding:0 4px 0 14px;border-radius:999px;background:rgba(255,255,255,.88);box-shadow:0 2px 10px rgba(60,40,30,.12)}
.userpill span{font-size:14px;color:#5C5650}
.linkbtn{height:44px;padding:0 10px;border:0;background:transparent;color:#B3261E;font-weight:700;font-size:14px;cursor:pointer}

/* ---------- type ---------- */
.eyebrow{margin:0;font-size:13px;font-weight:800;letter-spacing:.16em;color:#B3261E}
.eyebrow.big{font-size:17px;letter-spacing:.14em}
.title{margin:12px 0 0;font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:66px;line-height:.92;letter-spacing:-.01em;color:#2A2622}
.title span{color:#B3261E}
.h2{margin:8px 0 0;font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:40px;line-height:1;color:#2A2622}
.lead{margin:18px 0 0;max-width:290px;font-size:17px;line-height:1.45;color:#4A443E;text-wrap:pretty}
.lead.small{margin-top:10px;font-size:15px}
.narrow{max-width:230px}
.note{margin:0;text-align:center;font-size:14px;line-height:1.4;color:#5C5650}

.pills{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:22px}
.pill{padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.85);border:1px solid #DDD7D0;font-size:14px;font-weight:700}

/* ---------- controls ---------- */
.btn{display:flex;align-items:center;justify-content:center;height:58px;border:0;border-radius:16px;background:#B3261E;color:#fff;
  font-weight:800;font-size:18px;text-decoration:none;box-shadow:0 10px 20px rgba(179,38,30,.3);cursor:pointer;width:100%}
.btn:hover{background:#9E2019;color:#fff}
.btn:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}
.btn:focus-visible,.back:focus-visible,.gift-btn:focus-visible,.linkbtn:focus-visible{outline:3px solid #D4A43A;outline-offset:3px}
.welcome .actions{display:flex;flex-direction:column;gap:10px}

.back{width:44px;height:44px;margin-left:-6px;border-radius:50%;background:rgba(255,255,255,.88);color:#2A2622;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(60,40,30,.12)}
.pick-title{margin-top:176px;font-size:46px}
.pick form{display:flex;flex-direction:column;flex-grow:1}
.field{margin-top:20px;display:flex;flex-direction:column;gap:8px}
.field label{font-size:14px;font-weight:800;color:#B3261E}
.field label.again{margin-top:6px}
.input{width:100%;height:52px;border:1.5px solid #CFC9C2;border-radius:14px;padding:0 16px;font:600 17px 'Figtree',system-ui,sans-serif;color:#2A2622;background:#fff;outline:none;appearance:none;-webkit-appearance:none}
.input:focus{border-color:#B3261E;box-shadow:0 0 0 3px rgba(179,38,30,.18)}
.input::placeholder{color:#7A736C}
.input.pin{letter-spacing:.4em}
.select-wrap{position:relative}
.select-wrap svg{position:absolute;right:16px;top:16px;pointer-events:none}
.hint{font-size:13px;color:#5C5650}
.hint.bad{color:#B3261E;font-weight:600}
.error{margin:18px 0 0;padding:12px 14px;border-radius:12px;background:#FBE3E1;color:#8E1C16;font-size:15px;font-weight:600}
.pick .btn{margin-top:24px}

/* ---------- box ---------- */
.gift-btn{position:relative;margin:70px auto 0;display:block;width:280px;height:290px;padding:0;border:0;background:transparent;cursor:pointer}
.gift-btn .glow{position:absolute;left:30px;top:40px;width:220px;height:220px;border-radius:50%;background:#FFF6DC;animation:mm-pulse 2.6s ease-in-out infinite}
.gift-btn .burst{position:absolute;left:90px;top:60px;width:100px;height:100px;border-radius:50%;background:#FFE7A6;opacity:0}
.gift-btn .gift{left:40px;top:70px}
.gift-btn.shaking .gift{animation:mm-shake .85s ease-in-out}
.gift-btn.open .lid{transform:translate(40px,-140px) rotate(28deg);opacity:0}
.gift-btn.open .burst{animation:mm-burst .9s ease-out forwards}
.gift-hint{margin:0;align-self:center;font-size:16px;font-weight:800;color:#B3261E}

/* ---------- reveal ---------- */
.center{display:flex;flex-direction:column;align-items:center;text-align:center}
.string{position:relative;z-index:2;margin-top:4px}
.tag-shadow{margin-top:-24px;filter:drop-shadow(0 14px 18px rgba(60,40,30,.22))}
.tag{position:relative;width:260px;padding:42px 22px 24px;background:#FFFDF8;color:#2A2622;
  clip-path:polygon(24% 0,76% 0,100% 15%,100% 100%,0 100%,0 15%);transform:rotate(-3deg);display:flex;flex-direction:column;align-items:center;gap:6px}
.tag-hole{position:absolute;left:50%;top:14px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#E6E2DE;box-shadow:inset 0 0 0 2px #C9962B}
.tag-to{font-size:13px;font-weight:800;letter-spacing:.16em;color:#8A5A0B}
.tag-name{margin:0;font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:54px;line-height:.95;color:#B3261E;overflow-wrap:anywhere}
.tag-rule{align-self:stretch;margin:10px 0 4px;border-top:2px dashed #DDD7D0}
.tag-budget{padding:6px 14px;border-radius:999px;background:#B3261E;color:#fff;font-size:15px;font-weight:800}
.tag-note{margin-top:4px;max-width:200px;font-size:14px;line-height:1.4;font-weight:600;color:#4A443E;text-wrap:pretty}
.card{margin-top:26px;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.85);border:1px solid #DDD7D0;display:flex;gap:14px;align-items:flex-start}
.card div{display:flex;flex-direction:column;gap:4px}
.card strong{font-size:16px;font-weight:800}
.card span{font-size:15px;line-height:1.4;color:#4A443E}
.footer-note{margin-top:16px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.footer-note strong{font-size:15px}
.footer-note span{font-size:13px;color:#5C5650}
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:6}
.confetti i{position:absolute;top:0;border-radius:2px;transform:translateY(-60px);animation:mm-fall linear 1 forwards}

/* ---------- motion ---------- */
.rise{animation:mm-rise .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes mm-shake{0%,100%{transform:rotate(0)}15%{transform:rotate(-7deg)}30%{transform:rotate(6deg)}45%{transform:rotate(-5deg)}60%{transform:rotate(4deg)}75%{transform:rotate(-2deg)}}
@keyframes mm-pulse{0%,100%{transform:scale(.92);opacity:.55}50%{transform:scale(1.04);opacity:.95}}
@keyframes mm-burst{from{transform:scale(.2);opacity:.95}to{transform:scale(2.8);opacity:0}}
@keyframes mm-fall{from{transform:translateY(-60px) rotate(0)}to{transform:translateY(110vh) rotate(620deg)}}
@keyframes mm-rise{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes mm-snow{from{transform:translate(0,-20px)}to{transform:translate(18px,110vh)}}
@keyframes mm-twinkle{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
@keyframes mm-flame{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.15) translateY(-1px)}}
@media (prefers-reduced-motion:reduce){
  .flake,.twinkle,.candle .flame,.gift-btn .glow,.rise{animation:none!important}
  .confetti{display:none}
}