:root{--ink:#4e5260;--blue:#b8d8f5;--green:#b8d69b;--green-dark:#79a768;--pink:#f5bddb;--pink-dark:#df87b5;--paper:#fffdf9;--shadow:0 14px 0 rgba(98,117,125,.13),0 24px 35px rgba(63,91,106,.16)}
*{box-sizing:border-box}body{min-width:320px;margin:0;color:var(--ink);font-family:Fredoka,system-ui,sans-serif;background-color:var(--blue);background-image:radial-gradient(rgba(255,255,255,.72) 1.15px,transparent 1.15px),linear-gradient(150deg,rgba(255,255,255,.35),transparent 47%);background-size:13px 13px,auto}.page-shell{position:relative;isolation:isolate;min-height:100vh;overflow:hidden;padding:96px 20px 38px;display:grid;place-items:center}.page-shell:before,.page-shell:after{position:absolute;z-index:-2;content:"";width:120vw;height:150px;background:repeating-linear-gradient(125deg,#c7dfad 0 16px,#a8cd95 16px 33px,#d9ebc3 33px 49px);filter:drop-shadow(0 5px 1px rgba(75,125,71,.14));opacity:.85}.page-shell:before{top:52px;transform:rotate(-6deg)}.page-shell:after{bottom:-61px;transform:rotate(5deg)}
.puzzle-card{width:min(100%,660px);position:relative;padding:clamp(25px,6vw,48px);border:7px solid rgba(255,255,255,.7);border-radius:32px 32px 46px 38px;background:var(--paper);box-shadow:var(--shadow)}.puzzle-card:before{position:absolute;content:"";inset:12px;z-index:-1;border:2px dashed #cfe5ba;border-radius:24px 20px 34px 27px}.paper-tape{position:absolute;width:105px;height:30px;background:rgba(255,205,226,.75);top:-16px;transform:rotate(-8deg)}.tape-left{left:8%}.tape-right{right:7%;transform:rotate(7deg);background:rgba(210,235,195,.82)}
.hero{display:flex;align-items:center;gap:21px}.clover-box{position:relative;flex:0 0 96px;height:96px;border-radius:24px 28px 24px 35px;background:#fae4f0;border:3px solid #fff;box-shadow:4px 5px 0 #c7dfad}.clover-box span{position:absolute;left:29px;top:19px;color:#a8cc85;font-size:55px;line-height:.8;transform:rotate(-22deg)}.clover-box i,.clover-box b{position:absolute;display:block;width:36px;height:36px;border-radius:50% 50% 45% 50%;background:#a8cc85}.clover-box i{left:15px;bottom:18px;transform:rotate(-33deg)}.clover-box b{right:13px;bottom:14px;transform:rotate(28deg)}.eyebrow{margin:0 0 3px;color:var(--pink-dark);font-weight:700;letter-spacing:.04em;text-transform:lowercase;font-size:.82rem}h1,h2{margin:0;color:#555964;font-family:"DM Serif Display",Georgia,serif;font-weight:400;line-height:.84}h1{font-size:clamp(2.35rem,9vw,4.1rem);letter-spacing:-.055em}h1 em{display:block;color:var(--green-dark);font-family:Fredoka,sans-serif;font-size:.34em;font-style:normal;letter-spacing:.04em;line-height:1.25}.intro{margin:25px 0;max-width:530px;line-height:1.5;font-size:.98rem}
fieldset{border:0;padding:0;margin:0;min-width:0}.step{display:none;animation:pop .35s ease both}.step.active{display:block}legend{width:100%;margin-bottom:18px;color:var(--green-dark);font-weight:700;font-size:1.05rem}legend span{display:inline-grid;width:27px;height:27px;margin-right:8px;place-items:center;border-radius:50%;color:#fff;background:var(--pink-dark);font-size:.76rem}label{display:block;margin:14px 0 7px;font-weight:600;font-size:.93rem}input{width:100%;min-height:48px;padding:12px 14px;border:2px solid #d3e6c4;border-radius:12px 15px 11px 15px;outline:0;color:var(--ink);background:#fff;font:inherit;transition:border-color .2s,box-shadow .2s}input::placeholder{color:#a5afad}input:focus{border-color:var(--pink-dark);box-shadow:0 0 0 4px rgba(245,189,219,.3)}.question{padding:2px 0 8px;border-bottom:1px dashed #e2ebda}.question:last-of-type{border:0}.error-message{min-height:20px;margin:11px 0 0;color:#c75286;font-size:.86rem;font-weight:600}.button-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:7px}.button{min-height:45px;border:0;border-radius:14px 11px 14px 12px;padding:10px 18px;cursor:pointer;color:#fff;font:700 .92rem Fredoka,sans-serif;letter-spacing:.01em;transition:transform .17s ease,filter .17s ease}.button:hover{transform:translateY(-2px) rotate(-1deg);filter:brightness(1.04)}.button:active{transform:translateY(1px)}.primary{margin-top:10px;background:var(--pink-dark);box-shadow:3px 4px 0 #c970a4}.primary span{margin-left:3px;font-size:1.2em}.secondary{color:#59806c;background:#dceccc;box-shadow:3px 4px 0 #a7c78f}.button-row .primary{margin-top:0}
.reward{text-align:center;animation:pop .45s ease both}.reward h2{margin:6px 0 11px;font-size:clamp(2rem,7vw,3rem);line-height:.95}.reward>p:not(.eyebrow):not(.copy-notice){margin:0 auto 18px;max-width:430px;line-height:1.55}.reward-star{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 12px;border-radius:50% 45% 50% 43%;color:#fff;background:var(--green-dark);font-size:2.1rem;box-shadow:4px 4px 0 #dceccc}
.gift-link-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:16px;border:2px dashed #eab0cc;border-radius:16px;background:#fff3f9}
.binary-reward{max-width:100%;word-break:break-word;overflow-wrap:anywhere;color:#8b5c79;font-size:.82rem;font-weight:600;line-height:1.5}
.copy-button{width:auto;margin-top:2px;flex:0 0 auto;min-height:38px;padding:7px 12px;background:var(--green-dark);box-shadow:2px 3px 0 #a9c68e;font-size:.8rem}
.copy-notice{min-height:20px;margin:9px 0 2px;color:#59806c;font-size:.88rem;font-weight:600}.text-button{margin-top:12px;border:0;background:none;cursor:pointer;color:var(--pink-dark);font:600 .85rem Fredoka,sans-serif;text-decoration:underline}
.sticker{position:absolute;top:24px;left:max(18px,calc(50% - 340px));z-index:-1;padding:8px 14px;transform:rotate(-6deg);color:#ef9dc7;background:#fffdf9;box-shadow:3px 4px 0 rgba(92,105,112,.13);font-family:"DM Serif Display",Georgia,serif;font-size:1.35rem}.sticker span{color:var(--green-dark)}.apple{position:absolute;z-index:-1;color:#ee91bb;text-shadow:2px 3px #fff;font-size:3rem}.apple-one{top:164px;left:8%}.apple-two{right:8%;bottom:136px;color:var(--green-dark)}.yarn{position:absolute;z-index:-1;width:280px;height:75px;border:20px solid #c9deb6;border-left:0;border-right:0;border-radius:50%;opacity:.94}.yarn-top{top:100px;right:-50px;transform:rotate(18deg)}.yarn-bottom{bottom:75px;left:-65px;transform:rotate(-18deg)}.footer-note{position:relative;z-index:1;margin:29px 0 0;color:#547268;font-size:.8rem;font-weight:600}@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:520px){.page-shell{padding:76px 14px 28px}.puzzle-card{padding:27px 20px;border-radius:26px}.hero{gap:13px}.clover-box{flex-basis:72px;height:72px;border-radius:19px;transform:scale(.88);transform-origin:center}.intro{margin:21px 0}.gift-link-wrap{align-items:center}.copy-button{width:auto}.apple,.yarn{opacity:.55}.sticker{font-size:1.1rem}}
.reward > p:not(.eyebrow):not(.copy-notice).binary-hint {
  margin-top: 16px;
}

/* =========================
   SCRATCH CARD
   ========================= */

.scratch-section {
  margin: 28px 0 22px;
  text-align: center;
}

.scratch-title {
  margin-bottom: 12px;
  font-family: "Fredoka", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
}

.scratch-card {
  position: relative;
  width: 100%;
  max-width: 430px;
  height: 190px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(80, 100, 120, 0.12);
  touch-action: none;
  user-select: none;
}

.binary-reveal {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: #fff;
}

.binary-reward {
  width: 100%;
  font-family: "Fredoka", sans-serif;
  font-size: clamp(0.75rem, 2.5vw, 0.95rem);
  line-height: 1.7;
  word-break: break-all;
  color: #4c6680;
}

#scratchCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}

#scratchCanvas:active {
  cursor: grabbing;
}

.scratch-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  pointer-events: none;
  font-family: "Fredoka", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.scratch-label span {
  font-size: 1.1rem;
}

.scratch-hint {
  margin-top: 12px;
  font-size: 0.82rem;
  opacity: 0.7;
}

.scratch-card.revealed #scratchCanvas {
  pointer-events: none;
}

.scratch-card.revealed .scratch-label {
  display: none;
}

.copy-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}