@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Cormorant+Garamond:wght@500;600;700&family=Great+Vibes&display=swap');

:root{
  --bg:#F5EBDD;
  --bg-2:#E9D5B9;
  --bg-3:#E8D8C5;
  --ink:#8D7770;
  --muted:#A58B73;
  --line:#e7d4bf;
  --card:#fffaf4;
  --boy:#B9C9DF;
  --boy-strong:#7eb0d9;
  --girl:#E8BFC5;
  --girl-strong:#d996a7;
  --accent:#EED9A8;
  --shadow:0 24px 60px rgba(138, 108, 77, .15);
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.65), transparent 35%),
    radial-gradient(circle at bottom right, rgba(255,255,255,.45), transparent 32%),
    linear-gradient(180deg, var(--bg), #f7efe5 58%, #fbf6f0 100%);
  color:var(--ink);
  font-family:'Nunito','Noto Sans',system-ui,sans-serif;
  overflow-x:hidden;
}
.background-blur{position:fixed;border-radius:50%;filter:blur(50px);pointer-events:none;z-index:-1;opacity:.65}
.blur-one{width:40vw;height:40vw;left:-10vw;top:-8vw;background:rgba(233,213,185,.75)}
.blur-two{width:34vw;height:34vw;right:-8vw;bottom:-10vw;background:rgba(230,185,195,.35)}
.site-shell{width:min(100% - 28px, 860px);margin:0 auto;padding:24px 0 40px;min-height:100vh;display:flex;align-items:center;justify-content:center}
.hidden{display:none !important}

.intro-screen,
.reveal-screen{width:100%}

.intro-screen{
  min-height:calc(100vh - 64px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.intro-kicker{
  margin:0 0 28px;
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(30px, 4vw, 42px);
  letter-spacing:.04em;
  color:#7d6d5d;
}
.intro-helper{
  margin:20px 0 0;
  color:var(--muted);
  font-size:15px;
  letter-spacing:.06em;
}
.fade-item{opacity:0;transform:translateY(10px);animation:fadeRise .8s ease forwards}
.fade-1{animation-delay:.1s}.fade-2{animation-delay:.28s}.fade-3{animation-delay:.46s}
@keyframes fadeRise{to{opacity:1;transform:translateY(0)}}

.envelope-trigger{
  border:0;background:transparent;padding:10px;cursor:pointer;border-radius:24px;
  transition:transform .24s ease, filter .24s ease;
}
.envelope-trigger:hover{transform:translateY(-4px) scale(1.02);filter:brightness(1.02)}
.envelope-trigger:focus-visible,.choice:focus-visible,.primary-button:focus-visible,.share-button:focus-visible,.name-field input:focus-visible{
  outline:3px solid #b99973;outline-offset:4px;
}

.envelope{
  position:relative;display:block;margin:0 auto;
}
.envelope-intro{width:min(72vw, 270px);height:min(48vw, 178px)}
.envelope-stage{width:min(66vw, 255px);height:min(42vw, 166px)}
.envelope-shadow{position:absolute;left:10%;right:10%;bottom:-16px;height:26px;border-radius:50%;background:rgba(120,99,77,.12);filter:blur(5px)}
.envelope-back{
  position:absolute;inset:0;border-radius:8px;background:linear-gradient(180deg,#fff5ea,#f4e1cb);border:1px solid #ecd8c2;
}
.envelope-letter{
  position:absolute;left:15%;right:15%;height:78%;top:8%;border-radius:8px 8px 4px 4px;background:linear-gradient(180deg,#fffdf9,#fff3e8);border:1px solid #efdfcf;transform:translateY(-10%);box-shadow:0 8px 20px rgba(158,122,88,.08);
}
.envelope-front{
  position:absolute;left:0;right:0;bottom:0;height:62%;background:linear-gradient(180deg,#f8ead8,#efddc9);border:1px solid #ecd8c2;border-top:none;border-radius:0 0 8px 8px;
}
.envelope-front::before,
.envelope-front::after{content:'';position:absolute;bottom:0;width:52%;height:100%;background:linear-gradient(180deg,#f7e6d2,#eedcc8)}
.envelope-front::before{left:0;clip-path:polygon(0 0,100% 50%,0 100%);border-left:1px solid #ecd8c2}
.envelope-front::after{right:0;clip-path:polygon(100% 0,0 50%,100% 100%);border-right:1px solid #ecd8c2}
.envelope-flap{
  position:absolute;left:0;right:0;top:0;height:72%;transform-origin:top center;clip-path:polygon(0 0,50% 72%,100% 0);background:linear-gradient(180deg,#f2dfca,#e8d0b8);border:1px solid #e3c8ab;border-bottom:none;border-radius:8px 8px 0 0;transition:transform .75s ease;
}
.seal{
  position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#e7c7cd;color:#fff;font-size:18px;box-shadow:0 10px 24px rgba(213,153,167,.28)
}
.intro-screen.opening .envelope-trigger{pointer-events:none}
.intro-screen.opening .envelope-flap{transform:rotateX(180deg)}
.intro-screen.opening .envelope-letter{animation:letterLift .75s ease forwards}
.intro-screen.opening .seal{animation:sealPop .45s ease forwards}
@keyframes letterLift{0%{transform:translateY(-10%)}100%{transform:translateY(-42%)}}
@keyframes sealPop{to{transform:translate(-50%,-50%) scale(.5);opacity:0}}

.main-card{
  position:relative;
  background:rgba(255,250,244,.92);
  border:1px solid rgba(231,212,191,.95);
  border-radius:34px;
  box-shadow:var(--shadow);
  padding:30px 26px 34px;
  text-align:center;
  overflow:hidden;
}
.main-card::before{
  content:'';position:absolute;inset:0;background:
   radial-gradient(circle at top right, rgba(255,255,255,.7), transparent 30%),
   radial-gradient(circle at bottom left, rgba(233,213,185,.28), transparent 34%);
  pointer-events:none;
}
.party-kicker{
  position:relative;margin:8px 0 8px;
  text-transform:uppercase;letter-spacing:.18em;font-size:11px;font-weight:800;color:#a48b73;
}
.party-subtitle{
  position:relative;margin:0;color:#7e6d5d;font-size:18px;font-family:'Cormorant Garamond',serif;
}
.party-names{
  position:relative;margin:8px 0 18px;font-family:'Great Vibes',cursive;font-size:clamp(42px, 8vw, 62px);font-weight:400;color:#9a7a60;line-height:1.08;
}
.scene-wrap{position:relative;margin:0 auto 20px;max-width:620px;padding-top:8px}
.label-cloud{
  position:absolute;display:grid;place-items:center;z-index:3;
  min-width:98px;height:58px;padding:0 18px;border-radius:999px;background:rgba(255,255,255,.88);color:#8f7f71;font-family:'Cormorant Garamond',serif;font-size:28px;text-transform:lowercase;box-shadow:0 10px 25px rgba(146,116,88,.12)
}
.label-cloud::before,.label-cloud::after{content:'';position:absolute;background:rgba(255,255,255,.88);border-radius:50%}
.label-cloud::before{width:30px;height:30px;left:12px;top:-10px}
.label-cloud::after{width:22px;height:22px;right:14px;top:-8px}
.cloud-boy{left:2%;top:16px}
.cloud-girl{right:2%;bottom:24px}
.hero-scene{position:relative;height:275px;margin:0 auto;display:flex;align-items:flex-end;justify-content:center}
.sheep-pop{position:absolute;left:50%;bottom:76px;transform:translateX(-50%);width:240px;height:188px;animation:sheepBounce .9s .18s both cubic-bezier(.22,1.1,.3,1)}
@keyframes sheepBounce{0%{opacity:0;transform:translateX(-50%) translateY(30px) scale(.85)}70%{opacity:1;transform:translateX(-50%) translateY(-10px) scale(1.03)}100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
.balloon{position:absolute;width:52px;height:68px;border-radius:50% 50% 46% 46%;top:-12px;box-shadow:inset -6px -10px 0 rgba(255,255,255,.18)}
.balloon::after{content:'';position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);width:10px;height:10px;background:inherit;clip-path:polygon(50% 100%,0 0,100% 0)}
.balloon-blue{left:10px;background:linear-gradient(180deg,#b5d9f1,#88badf)}
.balloon-pink{right:10px;background:linear-gradient(180deg,#efc8d1,#dda3b2)}
.balloon-string{position:absolute;width:2px;background:#c0aa90;top:50px;height:74px}
.string-left{left:36px;transform:rotate(12deg)}
.string-right{right:36px;transform:rotate(-10deg)}
.sheep{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:170px;height:146px}
.sheep-body{
  position:absolute;left:25px;right:25px;top:34px;height:90px;background:#fffdf8;border:2px solid #eadccb;border-radius:50px;box-shadow:inset 0 -10px 0 rgba(232,216,197,.45)
}
.sheep-body::before,.sheep-body::after{content:'';position:absolute;border-radius:50%;background:#fffdf8;border:2px solid #eadccb}
.sheep-body::before{width:44px;height:44px;left:-12px;top:8px}
.sheep-body::after{width:44px;height:44px;right:-12px;top:12px}
.sheep-face{position:absolute;left:50%;top:54px;transform:translateX(-50%);width:68px;height:58px;border-radius:34px;background:#ead7c3;border:2px solid #dbc4ab}
.eye{position:absolute;top:21px;width:7px;height:10px;border-radius:50%;background:#695849}
.eye-left{left:20px}.eye-right{right:20px}
.nose{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);width:14px;height:9px;border-radius:8px;background:#a98681}
.blush{position:absolute;bottom:18px;width:10px;height:10px;border-radius:50%;background:#f3c3c9;opacity:.7}
.blush-left{left:10px}.blush-right{right:10px}
.sheep-ear{position:absolute;top:58px;width:20px;height:28px;background:#e6cfb8;border:2px solid #dbc4ab;border-radius:50%}
.sheep-ear-left{left:41px;transform:rotate(26deg)}
.sheep-ear-right{right:41px;transform:rotate(-26deg)}
.leg{position:absolute;bottom:-4px;width:10px;height:35px;border-radius:99px;background:#d7c0a6}
.leg-1{left:48px}.leg-2{left:69px}.leg-3{right:69px}.leg-4{right:48px}

.vote-card,
.results-panel{
  position:relative;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(232,216,197,.9);
  border-radius:24px;
  padding:22px 18px;
  margin-top:18px;
}
.name-field{text-align:left;margin-bottom:18px}
.name-field label{display:block;margin-bottom:8px;font-size:15px;font-weight:800;color:#746353}
.name-field input{
  width:100%;padding:14px 16px;border-radius:14px;border:1.8px solid #e3d4c4;background:#fffdfa;color:var(--ink);font:700 16px 'Nunito',sans-serif;transition:border-color .18s, box-shadow .18s;
}
.name-field input:focus{border-color:#c6a784;box-shadow:0 0 0 4px rgba(201,171,134,.16);outline:none}
.name-field p{margin:8px 2px 0;font-size:12px;color:#998a7d}
.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.choice{
  border-radius:20px;padding:20px 10px;border:2px solid transparent;background:#fff;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.choice:hover{transform:translateY(-2px)}
.choice-boy{background:linear-gradient(180deg,#f7fbfe,#edf5fb);border-color:#d9eaf5}
.choice-girl{background:linear-gradient(180deg,#fff7f9,#fbeef2);border-color:#f0dce2}
.choice[aria-pressed="true"]{box-shadow:0 12px 25px rgba(146,116,88,.14)}
.choice-boy[aria-pressed="true"]{border-color:var(--boy-strong)}
.choice-girl[aria-pressed="true"]{border-color:var(--girl-strong)}
.choice-icon{font-size:36px;line-height:1.1}
.choice-caption{font-size:11px;font-weight:900;letter-spacing:.16em;color:#9c8878}
.choice-title{font-size:24px;font-weight:900;color:#6a5949}
.primary-button{
  width:100%;margin-top:18px;border:0;border-radius:16px;padding:15px 18px;background:linear-gradient(90deg,#dcc1a0,#d5b2bb,#b8cfe2);color:#fff;font:800 16px 'Nunito',sans-serif;cursor:pointer;box-shadow:0 10px 26px rgba(146,116,88,.18);transition:filter .18s ease, transform .18s ease;
}
.primary-button:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.primary-button:not(:disabled):hover{transform:translateY(-1px);filter:brightness(1.02)}
.fine-print{margin:14px 0 0;font-size:12px;color:#9a8a7c}
.result-banner{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 18px;border-radius:999px;background:#f9f1e6;color:#8b765f;font-weight:800}
.results-panel h2{margin:18px 0 4px;font-family:'Cormorant Garamond',serif;font-size:34px;color:#725f4e}
.result-subtext{margin:0 0 24px;color:#918272;font-size:14px}
.result-row{text-align:left;margin:18px 0}
.result-label{display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:800;margin-bottom:8px;color:#6f5d4d}
.track{height:15px;border-radius:999px;background:#f1e6da;overflow:hidden}
.bar{height:100%;border-radius:inherit;transition:width .85s cubic-bezier(.2,.85,.25,1)}
.bar-boy{background:linear-gradient(90deg,#b8dced,#87badf)}
.bar-girl{background:linear-gradient(90deg,#f0c9d2,#d89dac)}
.total{margin:24px 0 18px;color:#8d7b6b}
.total strong{font-size:24px;color:#6b5748}
.share-button{padding:13px 24px;border-radius:14px;border:1px solid #ead9c8;background:#fffdfa;color:#876f5a;font-weight:800;cursor:pointer}
.share-button:hover{background:#fffcf8}
.status{min-height:1.2em;margin:12px 4px 0;color:#b56876;font-size:13px}
.status:empty{display:none}

@media (max-width: 640px){
  .site-shell{width:min(100% - 18px, 860px);padding:16px 0 24px}
  .intro-screen{min-height:calc(100vh - 40px)}
  .main-card{padding:22px 14px 22px;border-radius:26px}
  .party-subtitle{font-size:17px}
  .party-names{margin-bottom:10px}
  .label-cloud{min-width:78px;height:48px;font-size:24px;padding:0 12px}
  .cloud-boy{top:12px;left:0}
  .cloud-girl{right:0;bottom:34px}
  .hero-scene{height:250px}
  .sheep-pop{width:210px;height:176px;bottom:70px}
  .envelope-stage{width:220px;height:148px}
  .choice-grid{grid-template-columns:1fr}
  .results-panel h2{font-size:30px}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}

/* Personal palette and the post-vote reveal moment */
.party-kicker{color:#A58B73;font-size:14px;letter-spacing:.25em}
.party-subtitle{color:#8D7770}
.party-names{color:#A58B73}
.cloud-boy{color:#8fa8c5}.cloud-girl{color:#c995a5}
.reveal-screen{animation:fadeRise .7s ease both}
.gender-reveal-panel{position:relative;margin:20px auto 0;padding:32px 16px 27px;border:1px solid #E8D8C5;border-radius:25px;background:linear-gradient(140deg,#fffaf4,#F5EBDD);animation:fadeRise .65s ease both;overflow:hidden}
.reveal-small{font-family:'Cormorant Garamond',serif;font-size:24px;margin:0;color:#A58B73}
.gender-reveal-panel h2{font-family:'Cormorant Garamond',serif;font-size:clamp(40px,8vw,68px);margin:10px 0;color:#8D7770}
.reveal-symbol{font-size:clamp(70px,14vw,110px);line-height:1.35;animation:revealPop .9s cubic-bezier(.2,1.2,.3,1) both}
.reveal-caption{font-size:16px;font-weight:800;color:#8D7770}
.reveal-sparkle{font-size:24px;letter-spacing:14px;color:#EED9A8;animation:fadeRise .9s ease both}
.gender-reveal-panel.is-boy{background:linear-gradient(135deg,#fffaf4,#e5edf7)}
.gender-reveal-panel.is-girl{background:linear-gradient(135deg,#fffaf4,#f7e6e9)}
.gender-reveal-panel.is-boy h2{color:#8fa8c5}.gender-reveal-panel.is-girl h2{color:#c995a5}
@keyframes revealPop{0%{transform:scale(.4) translateY(25px);opacity:0}75%{transform:scale(1.12);opacity:1}100%{transform:scale(1);opacity:1}}