:root {
  --sky: #4fb5ff;
  --sky2: #2a8fe6;
  --grass: #3fbf4a;
  --grass2: #2e9a3a;
  --ink: #111;
  --paper: #fff;
  --green: #22d34a;
  --pink: #ff5fb5;
  --yellow: #ffe234;
  --display: "Luckiest Guy", Impact, "Arial Black", sans-serif;
  --body: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
  background: linear-gradient(180deg, var(--sky) 0%, var(--sky2) 55%, var(--grass) 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}
h1, h2 { font-family: var(--display); font-weight: 400; letter-spacing: 1px; margin: 0; }
h2 { font-size: clamp(34px, 6vw, 56px); text-align: center; color: var(--paper); -webkit-text-stroke: 2px var(--ink); text-shadow: 5px 5px 0 var(--ink); margin-bottom: 22px; transform: rotate(-2deg); }
section { position: relative; z-index: 2; padding: 56px 20px; max-width: 1100px; margin: 0 auto; }
p { margin: 0 0 12px; }

#rain { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* marquee */
.marquee { position: relative; z-index: 3; background: var(--ink); color: var(--yellow); font-family: var(--display); font-size: 20px; letter-spacing: 2px; overflow: hidden; white-space: nowrap; padding: 8px 0; border-top: 4px solid var(--yellow); border-bottom: 4px solid var(--yellow); }
.marquee .track { display: inline-block; animation: slide 22s linear infinite; }
.marquee.bottom .track { animation-direction: reverse; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* hero */
.hero { position: relative; z-index: 2; text-align: center; padding: 30px 16px 40px; max-width: 1100px; margin: 0 auto; }
.banner { width: 100%; max-width: 1000px; border: 6px solid var(--ink); border-radius: 22px; box-shadow: 12px 12px 0 var(--ink); transform: rotate(-1.2deg); display: block; margin: 0 auto 30px; background: #fff; }
.hero h1 { font-size: clamp(76px, 16vw, 180px); line-height: 0.95; color: var(--paper); -webkit-text-stroke: 3px var(--ink); text-shadow: 8px 8px 0 var(--ink), 14px 14px 0 var(--green); }
.wobble { display: inline-block; animation: wobble 2.4s ease-in-out infinite; }
@keyframes wobble { 0%, 100% { transform: rotate(-3deg) scale(1); } 50% { transform: rotate(3deg) scale(1.04); } }
.tag { font-family: var(--display); font-size: clamp(26px, 5vw, 44px); color: var(--yellow); -webkit-text-stroke: 1.5px var(--ink); text-shadow: 4px 4px 0 var(--ink); margin: 6px 0 4px; }
.sub { font-size: 20px; font-weight: 700; color: var(--paper); text-shadow: 2px 2px 0 var(--ink); max-width: 620px; margin: 0 auto 22px; }
.cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 22px; letter-spacing: 1.5px; text-decoration: none; color: var(--ink);
  background: var(--yellow); border: 4px solid var(--ink); border-radius: 14px; padding: 12px 26px;
  box-shadow: 6px 6px 0 var(--ink); transition: transform 0.08s, box-shadow 0.08s; cursor: pointer;
}
.btn:hover { transform: translate(-2px, -2px) rotate(-1deg); box-shadow: 9px 9px 0 var(--ink); }
.btn:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink); }
.btn.big { background: var(--green); font-size: 30px; padding: 16px 40px; animation: pulse 1.4s ease-in-out infinite; }
.btn.small { font-size: 16px; padding: 8px 16px; box-shadow: 4px 4px 0 var(--ink); }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

.sticker { position: absolute; width: 130px; border: 4px solid var(--ink); border-radius: 50%; background: #fff; box-shadow: 5px 5px 0 var(--ink); pointer-events: none; }
.s1 { left: -20px; top: 40px; transform: rotate(-14deg); }
.s2 { right: -10px; top: 30px; transform: rotate(16deg); width: 110px; }
.float { animation: float 3.2s ease-in-out infinite; }
.float.slow { animation-duration: 4.4s; animation-delay: -1.5s; }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -18px; } }

/* contract */
.ca { padding-top: 10px; }
.ca-box { background: var(--paper); border: 5px solid var(--ink); border-radius: 18px; box-shadow: 10px 10px 0 var(--ink); padding: 18px 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; transform: rotate(0.8deg); }
.label { font-family: var(--display); font-size: 20px; letter-spacing: 2px; color: var(--pink); -webkit-text-stroke: 1px var(--ink); }
.ca-box code { flex: 1; min-width: 200px; font-family: ui-monospace, Menlo, monospace; font-size: 15px; word-break: break-all; background: #f2f2f2; border: 3px dashed var(--ink); border-radius: 10px; padding: 10px 12px; }

/* clicker */
.clicker { display: flex; flex-direction: column; align-items: center; text-align: center; }
.clicker h2 { align-self: center; }
.tard-btn { background: none; border: 0; padding: 0; cursor: pointer; display: inline-block; }
.tard-btn img { width: min(320px, 70vw); border: 6px solid var(--ink); border-radius: 30px; background: #fff; box-shadow: 10px 10px 0 var(--ink); transition: transform 0.08s; }
.tard-btn:active img { transform: scale(0.94) rotate(-4deg); }
.tard-btn.hit img { animation: hit 0.35s ease-out; }
@keyframes hit { 0% { transform: scale(1); } 30% { transform: scale(1.12) rotate(6deg); } 100% { transform: scale(1); } }
.bubble { display: block; width: fit-content; margin: 26px auto 10px; background: var(--paper); border: 4px solid var(--ink); border-radius: 22px; padding: 12px 22px; font-weight: 700; font-size: 22px; box-shadow: 6px 6px 0 var(--ink); position: relative; max-width: 560px; }
.bubble::after { content: ''; position: absolute; top: -22px; left: 50%; margin-left: -10px; border: 10px solid transparent; border-bottom-color: var(--ink); }
.count { color: var(--paper); text-shadow: 2px 2px 0 var(--ink); font-weight: 700; }
.count b { font-family: var(--display); font-size: 30px; color: var(--yellow); -webkit-text-stroke: 1px var(--ink); }

/* about */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.card { background: var(--paper); border: 5px solid var(--ink); border-radius: 22px; padding: 26px 28px; box-shadow: 10px 10px 0 var(--ink); }
.card h2 { text-align: left; color: var(--pink); text-shadow: 4px 4px 0 var(--ink); font-size: 38px; }
.tilt-l { transform: rotate(-1.5deg); } .tilt-r { transform: rotate(1.5deg); }
.nomics { list-style: none; padding: 0; margin: 0; }
.nomics li { padding: 10px 0; border-bottom: 3px dotted #ccc; }
.nomics li:last-child { border: 0; }
.nomics b { font-family: var(--display); font-size: 24px; color: var(--sky2); letter-spacing: 1px; margin-right: 6px; }

/* meter */
.meter { text-align: center; }
.gauge { position: relative; height: 46px; max-width: 700px; margin: 0 auto 14px; background: var(--paper); border: 5px solid var(--ink); border-radius: 30px; overflow: hidden; box-shadow: 8px 8px 0 var(--ink); }
.gauge .fill { height: 100%; width: 0; background: repeating-linear-gradient(45deg, var(--green) 0 16px, var(--yellow) 16px 32px); transition: width 0.9s cubic-bezier(.3,1.6,.4,1); }
.gauge .needle { position: absolute; top: -6px; bottom: -6px; width: 6px; background: var(--ink); left: 0; transition: left 0.9s cubic-bezier(.3,1.6,.4,1); }
#meter-text { font-family: var(--display); font-size: 26px; color: var(--paper); -webkit-text-stroke: 1px var(--ink); text-shadow: 3px 3px 0 var(--ink); }

/* how to */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; max-width: 760px; margin: 0 auto; }
.steps li { display: flex; gap: 16px; align-items: center; background: var(--paper); border: 4px solid var(--ink); border-radius: 16px; padding: 14px 18px; box-shadow: 6px 6px 0 var(--ink); }
.steps li:nth-child(odd) { transform: rotate(-0.8deg); } .steps li:nth-child(even) { transform: rotate(0.8deg); }
.steps .n { flex: none; width: 48px; height: 48px; display: grid; place-items: center; font-family: var(--display); font-size: 26px; background: var(--pink); color: var(--paper); border: 4px solid var(--ink); border-radius: 50%; -webkit-text-stroke: 1px var(--ink); }

/* gallery */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
figure { margin: 0; background: var(--paper); border: 4px solid var(--ink); border-radius: 16px; padding: 10px; box-shadow: 6px 6px 0 var(--ink); text-align: center; transition: transform 0.15s; overflow: hidden; }
figure:hover { transform: scale(1.05) rotate(2deg); z-index: 3; }
figure img { width: 100%; border-radius: 10px; display: block; }
figcaption { font-weight: 700; padding-top: 8px; }
figure.hue1 img { filter: hue-rotate(200deg) saturate(1.8) contrast(1.1); }
figure.hue2 img { filter: hue-rotate(250deg) saturate(2) contrast(1.2); }
figure.flip img { transform: scaleY(-1); }
figure.spin img { animation: spin 3s linear infinite; }
figure.twin div { display: flex; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--sky); }
figure.twin img { width: 50%; height: 100%; object-fit: cover; object-position: 60% center; }
figure.twin img:last-child { transform: scaleX(-1); }
@keyframes spin { to { transform: rotate(360deg); } }

/* roadmap */
.phases { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.phase { background: var(--paper); border: 4px solid var(--ink); border-radius: 14px; padding: 12px 18px; box-shadow: 5px 5px 0 var(--ink); font-weight: 700; }
.phase b { display: block; font-family: var(--display); font-size: 18px; letter-spacing: 1px; color: var(--sky2); }
.phase.done { background: var(--green); }
.phase.done b { color: var(--ink); }
.phase.now { background: var(--yellow); animation: pulse 1.2s ease-in-out infinite; }

/* socials */
.links { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.links .btn { background: var(--paper); }

footer { position: relative; z-index: 2; text-align: center; padding: 40px 20px 90px; color: var(--paper); text-shadow: 1px 1px 0 var(--ink); font-size: 14px; max-width: 760px; margin: 0 auto; }
footer .tiny { font-family: var(--display); font-size: 18px; letter-spacing: 1px; color: var(--yellow); margin-top: 20px; }

.sticky-buy { position: fixed; right: 16px; bottom: 16px; z-index: 5; font-family: var(--display); font-size: 22px; letter-spacing: 1.5px; text-decoration: none; color: var(--ink); background: var(--green); border: 4px solid var(--ink); border-radius: 50px; padding: 12px 22px; box-shadow: 5px 5px 0 var(--ink); animation: pulse 1.4s ease-in-out infinite; }

.confetti { position: fixed; z-index: 6; width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--ink); pointer-events: none; background: #fff; object-fit: cover; }

@media (max-width: 760px) {
  body { font-size: 16px; }
  section { padding: 40px 14px; }
  .about { grid-template-columns: 1fr; }
  .grid { grid-template-columns: 1fr 1fr; }
  .sticker { display: none; }
  .btn.big { font-size: 24px; padding: 14px 28px; }
  .sticky-buy { right: 10px; bottom: 10px; font-size: 18px; }
}