:root {
  --praise-pink: #FF3B7A;
  --electric-ramune: #00D1FF;
  --prize-yellow: #FFF36D;
  --sticker-mint: #29E07B;
  --lacquer-night: #12121F;
  --soft-rice-paper: #F7F0FF;
  --red-stamp-ink: #E60033;
  --capsule-violet: #8C5CFF;
  --display: "Dela Gothic One", sans-serif;
  --round: "M PLUS Rounded 1c", sans-serif;
  --soft: "Zen Maru Gothic", sans-serif;
  --mincho: "Shippori Mincho", serif;
  --shadow: 12px 12px 0 var(--lacquer-night);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--lacquer-night);
  color: var(--lacquer-night);
  font-family: var(--soft);
  overflow-x: hidden;
}

button { font: inherit; color: inherit; cursor: pointer; }

.paper-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 80;
  opacity: .18;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.45) 0 1px, transparent 1px 8px),
    radial-gradient(circle at 80% 30%, rgba(18,18,31,.3) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(115deg, transparent 0 14px, rgba(255,255,255,.18) 14px 15px);
  mix-blend-mode: soft-light;
}

.station-nav {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: grid;
  gap: 12px;
}

.nav-stamp {
  width: 44px;
  height: 44px;
  border: 3px solid var(--lacquer-night);
  border-radius: 50%;
  background: var(--soft-rice-paper);
  color: var(--red-stamp-ink);
  font-family: var(--display);
  box-shadow: 5px 5px 0 var(--lacquer-night);
  transform: rotate(-8deg);
  transition: transform .25s ease, background .25s ease;
}

.nav-stamp.active,
.nav-stamp:hover {
  background: var(--prize-yellow);
  transform: rotate(8deg) scale(1.12);
}

.praise-station {
  position: relative;
  min-height: 100vh;
  padding: clamp(64px, 9vw, 120px) clamp(28px, 7vw, 110px);
  overflow: hidden;
  display: grid;
  align-items: center;
  isolation: isolate;
}

.praise-station::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -3;
  background:
    radial-gradient(circle, rgba(18,18,31,.25) 0 2px, transparent 2px 18px),
    repeating-linear-gradient(-38deg, transparent 0 34px, rgba(247,240,255,.22) 34px 38px);
  transform: rotate(-5deg);
}

.station-pink { background: var(--praise-pink); }
.station-blue { background: var(--electric-ramune); }
.station-yellow { background: var(--prize-yellow); }
.station-violet { background: var(--capsule-violet); }
.station-night { background: var(--lacquer-night); color: var(--soft-rice-paper); }

.sticker-shadow { box-shadow: var(--shadow); border: 4px solid var(--lacquer-night); }

.approval-marquee {
  width: min(880px, 86vw);
  margin-left: 3vw;
  padding: clamp(28px, 5vw, 62px);
  background: var(--soft-rice-paper);
  transform: rotate(-4deg);
  border-radius: 26px;
  position: relative;
}

.approval-marquee::after {
  content: "良 良 良 良 良";
  position: absolute;
  left: -28px;
  right: -28px;
  bottom: -32px;
  padding: 12px;
  background: var(--prize-yellow);
  border: 4px solid var(--lacquer-night);
  font-family: var(--round);
  font-weight: 900;
  letter-spacing: .4em;
  text-align: center;
}

.marquee-kicker,
.seal-label {
  display: inline-block;
  padding: 8px 14px;
  border: 3px solid var(--lacquer-night);
  background: var(--sticker-mint);
  font-family: var(--round);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  transform: rotate(2deg);
}

h1, h2 {
  margin: 0;
  font-family: var(--display);
  line-height: .86;
  letter-spacing: -.05em;
}

h1 { font-size: clamp(80px, 17vw, 230px); color: var(--red-stamp-ink); text-shadow: 8px 8px 0 var(--electric-ramune); }
h2 { font-size: clamp(58px, 11vw, 156px); }
p { font-size: clamp(18px, 2.2vw, 27px); line-height: 1.35; max-width: 760px; font-weight: 700; }

.marquee-lights { display: flex; gap: 12px; margin-top: 24px; }
.marquee-lights i {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid var(--lacquer-night);
  background: var(--prize-yellow);
  box-shadow: 0 0 20px var(--prize-yellow);
  animation: blink 1.1s steps(2) infinite;
}
.marquee-lights i:nth-child(even) { background: var(--electric-ramune); animation-delay: .35s; }

.ticket-ribbon {
  display: inline-block;
  padding: 12px 22px;
  background: var(--soft-rice-paper);
  border: 3px dashed var(--lacquer-night);
  font-family: var(--round);
  font-weight: 900;
  letter-spacing: .08em;
}
.ribbon-top { position: absolute; top: 28px; left: -32px; transform: rotate(-8deg); }
.ribbon-side { position: absolute; right: -80px; bottom: 120px; transform: rotate(90deg); }

.praise-stamp {
  display: grid;
  place-items: center;
  border: 7px solid var(--red-stamp-ink);
  color: var(--red-stamp-ink);
  background: rgba(247,240,255,.84);
  font-family: var(--mincho);
  font-weight: 800;
  border-radius: 18px;
  text-align: center;
}
.stamp-huge { position: absolute; right: 8vw; top: 18vh; width: 170px; height: 170px; font-size: 50px; transform: rotate(16deg); animation: stampPulse 2.5s ease-in-out infinite; }

.kanji-burst, .starburst {
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  background: var(--prize-yellow);
  color: var(--lacquer-night);
  border: 4px solid var(--lacquer-night);
  font-family: var(--display);
  font-size: 56px;
  clip-path: polygon(50% 0%,60% 26%,85% 13%,75% 40%,100% 50%,75% 61%,86% 88%,59% 75%,50% 100%,40% 75%,13% 88%,25% 61%,0% 50%,25% 40%,14% 13%,40% 26%);
  filter: drop-shadow(8px 8px 0 var(--lacquer-night));
}
.burst-one { position: absolute; bottom: 12vh; right: 18vw; animation: rotateBadge 7s linear infinite; }

.speech-bubble {
  position: absolute;
  padding: 18px 28px;
  background: var(--soft-rice-paper);
  border: 4px solid var(--lacquer-night);
  border-radius: 28px 28px 28px 4px;
  font-family: var(--round);
  font-weight: 900;
  font-size: 24px;
  box-shadow: 7px 7px 0 var(--lacquer-night);
  animation: jitter 1.8s steps(2) infinite;
}
.bubble-one { right: 8vw; bottom: 24vh; }
.bubble-two { left: 9vw; bottom: 13vh; background: var(--praise-pink); color: var(--soft-rice-paper); }
.shelf-flag { position: absolute; left: 8vw; bottom: 13vh; padding: 18px 34px; background: var(--prize-yellow); border: 4px solid var(--lacquer-night); font-family: var(--round); font-weight: 900; font-size: 28px; transform: rotate(7deg); box-shadow: 9px 9px 0 var(--lacquer-night); }

.speed-lines { position: absolute; inset: 0; background: repeating-conic-gradient(from 20deg at 18% 45%, rgba(247,240,255,.4) 0 3deg, transparent 3deg 9deg); opacity: .45; z-index: -1; }

.diagonal-counter {
  min-height: 520px;
  background: var(--soft-rice-paper);
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 36px;
  padding: clamp(28px, 5vw, 58px);
  transform: rotate(2deg) skewX(-2deg);
  position: relative;
}
.diagonal-counter > * { transform: skewX(2deg); }
.counter-copy h2 { color: var(--capsule-violet); text-shadow: 7px 7px 0 var(--prize-yellow); margin-top: 18px; }
.rubber-stamp { align-self: center; justify-self: center; border: 0; background: transparent; width: 220px; height: 260px; position: relative; transition: transform .18s cubic-bezier(.2,1.4,.4,1); }
.rubber-stamp.pressing { transform: translateY(58px) scaleY(.88); }
.handle { position: absolute; top: 0; left: 56px; width: 110px; height: 120px; background: var(--lacquer-night); border-radius: 30px 30px 14px 14px; box-shadow: inset 16px 0 0 rgba(255,255,255,.12); }
.stamp-face { position: absolute; bottom: 0; left: 18px; width: 184px; height: 122px; display: grid; place-items: center; border: 7px solid var(--lacquer-night); background: var(--red-stamp-ink); color: var(--soft-rice-paper); font-family: var(--display); font-size: 68px; border-radius: 12px; }
.stamp-pad { position: absolute; right: 58px; bottom: 38px; width: 270px; height: 44px; background: var(--red-stamp-ink); border: 5px solid var(--lacquer-night); border-radius: 50%; }
.stamp-field { position: absolute; left: 7%; bottom: 9%; display: flex; gap: 18px; flex-wrap: wrap; max-width: 520px; }
.stamp-imprint { width: 132px; height: 92px; font-size: 30px; opacity: .8; transform: rotate(-9deg) scale(.9); }
.stamp-imprint.fresh { animation: freshStamp .45s cubic-bezier(.1,1.6,.4,1); opacity: 1; }
.stamp-imprint.faint { opacity: .38; transform: rotate(11deg); }
.overpraise-meter { position: absolute; left: 8vw; top: 10vh; width: 320px; height: 58px; background: var(--soft-rice-paper); border: 4px solid var(--lacquer-night); box-shadow: 8px 8px 0 var(--lacquer-night); overflow: hidden; transform: rotate(-8deg); }
.overpraise-meter span { display: block; height: 100%; width: 68%; background: repeating-linear-gradient(90deg, var(--sticker-mint) 0 20px, var(--prize-yellow) 20px 40px, var(--praise-pink) 40px 60px); transition: width .6s cubic-bezier(.25,1.5,.4,1); }
.overpraise-meter b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--round); font-weight: 900; }

.capsule-machine { width: min(520px, 90vw); min-height: 620px; background: var(--praise-pink); border-radius: 42px; padding: 28px; justify-self: start; transform: rotate(-3deg); }
.machine-top { background: var(--prize-yellow); border: 4px solid var(--lacquer-night); border-radius: 18px; padding: 16px; text-align: center; font-family: var(--display); font-size: clamp(26px, 4vw, 46px); }
.capsule-window { position: relative; margin: 28px auto; height: 340px; border: 5px solid var(--lacquer-night); border-radius: 34px; background: var(--soft-rice-paper); overflow: hidden; }
.capsule-orb { position: absolute; width: 118px; height: 118px; border-radius: 50%; border: 4px solid var(--lacquer-night); display: grid; place-items: center; font-family: var(--display); font-size: 42px; box-shadow: 8px 8px 0 rgba(18,18,31,.45); animation: wobble 3s ease-in-out infinite; }
.ramune-gloss { background: radial-gradient(circle at 28% 20%, white 0 8%, transparent 9% 20%), linear-gradient(135deg, var(--electric-ramune) 0 50%, var(--capsule-violet) 50%); }
.orb-a { left: 42px; top: 48px; }
.orb-b { right: 54px; top: 86px; animation-delay: -.7s; background: radial-gradient(circle at 28% 20%, white 0 8%, transparent 9% 20%), linear-gradient(135deg, var(--prize-yellow) 0 50%, var(--sticker-mint) 50%); }
.orb-c { left: 142px; bottom: 42px; animation-delay: -1.2s; background: radial-gradient(circle at 28% 20%, white 0 8%, transparent 9% 20%), linear-gradient(135deg, var(--praise-pink) 0 50%, var(--soft-rice-paper) 50%); }
.orb-d { right: 24px; bottom: 20px; animation-delay: -1.7s; }
.machine-knob { display: grid; place-items: center; width: 140px; height: 140px; margin: 0 auto; border-radius: 50%; border: 6px solid var(--lacquer-night); background: var(--sticker-mint); box-shadow: 8px 8px 0 var(--lacquer-night); font-family: var(--display); font-size: 34px; transition: transform .4s cubic-bezier(.25,1.6,.5,1); }
.machine-knob.turning { transform: rotate(160deg) scale(1.08); }
.capsule-story { position: absolute; right: 8vw; top: 20vh; width: min(620px, 72vw); transform: rotate(4deg); }
.capsule-story h2 { color: var(--red-stamp-ink); text-shadow: 8px 8px 0 var(--electric-ramune); margin-top: 18px; }
.prize-ticket { position: absolute; right: 16vw; bottom: 14vh; padding: 18px 30px; background: var(--sticker-mint); border: 4px dashed var(--lacquer-night); font-family: var(--round); font-weight: 900; font-size: 28px; transform: rotate(-7deg); box-shadow: 8px 8px 0 var(--lacquer-night); }

.sticker-wall { position: relative; min-height: 650px; width: min(1100px, 88vw); margin: auto; background: var(--soft-rice-paper); border: 5px solid var(--lacquer-night); box-shadow: var(--shadow); transform: rotate(-2deg); overflow: hidden; }
.sticker-wall::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(140,92,255,.28) 0 3px, transparent 3px 22px); }
.wall-title { position: relative; padding: 44px; max-width: 760px; z-index: 2; }
.wall-title h2 { color: var(--capsule-violet); text-shadow: 8px 8px 0 var(--sticker-mint); margin-top: 16px; }
.sticker { position: absolute; z-index: 3; transition: transform .4s cubic-bezier(.25,1.6,.45,1); }
.sticker::after { content: ""; position: absolute; right: -2px; top: -2px; width: 34px; height: 34px; background: linear-gradient(45deg, rgba(18,18,31,.28), white); border-left: 3px solid var(--lacquer-night); border-bottom: 3px solid var(--lacquer-night); border-radius: 0 0 0 12px; }
.sticker:hover, .sticker.peel { transform: rotate(0deg) scale(1.12) translateY(-8px); }
.sticker-a { right: 12%; top: 12%; width: 145px; height: 145px; font-size: 60px; transform: rotate(18deg); }
.sticker-b { right: 32%; bottom: 14%; font-size: 32px; line-height: .9; background: var(--prize-yellow); transform: rotate(-14deg); }
.sticker-c { left: 9%; bottom: 13%; width: 170px; height: 170px; border-radius: 50%; background: var(--praise-pink); color: var(--soft-rice-paper); border: 5px solid var(--lacquer-night); display: grid; place-items: center; font-family: var(--mincho); font-size: 28px; font-weight: 800; transform: rotate(8deg); box-shadow: 9px 9px 0 var(--lacquer-night); }
.sticker-d { right: 6%; bottom: 30%; padding: 22px 32px; background: var(--sticker-mint); border: 4px solid var(--lacquer-night); font-family: var(--round); font-size: 30px; font-weight: 900; transform: rotate(11deg); box-shadow: 8px 8px 0 var(--lacquer-night); }
.sticker-e { left: 42%; top: 38%; background: var(--electric-ramune); transform: rotate(-8deg); }
.barcode-meter { position: absolute; left: 40px; right: 40px; bottom: 42px; height: 76px; background: var(--lacquer-night); color: var(--soft-rice-paper); border: 4px solid var(--lacquer-night); display: flex; align-items: stretch; gap: 9px; padding: 10px 150px 10px 14px; z-index: 2; }
.barcode-meter span { width: 16px; background: var(--soft-rice-paper); }
.barcode-meter span:nth-child(2) { width: 38px; background: var(--prize-yellow); }
.barcode-meter span:nth-child(3) { width: 24px; background: var(--praise-pink); }
.barcode-meter span:nth-child(4) { width: 58px; background: var(--sticker-mint); }
.barcode-meter em { position: absolute; right: 16px; top: 18px; font-family: var(--round); font-weight: 900; font-style: normal; }

.final-stack { position: relative; z-index: 4; width: min(820px, 90vw); padding: clamp(26px, 5vw, 58px); background: var(--soft-rice-paper); color: var(--lacquer-night); border: 5px solid var(--lacquer-night); box-shadow: 14px 14px 0 var(--praise-pink), 28px 28px 0 var(--electric-ramune); transform: rotate(2deg); }
.final-stack h2 { color: var(--red-stamp-ink); text-shadow: 7px 7px 0 var(--prize-yellow); }
.ceremony-seal { position: absolute; right: 28px; top: 24px; width: 104px; height: 104px; border: 5px double var(--red-stamp-ink); color: var(--red-stamp-ink); display: grid; place-items: center; font-family: var(--mincho); font-size: 30px; font-weight: 800; border-radius: 50%; transform: rotate(14deg); }
.final-controls { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; font-family: var(--round); font-weight: 900; }
.final-controls button { border: 4px solid var(--lacquer-night); background: var(--sticker-mint); padding: 16px 26px; border-radius: 999px; box-shadow: 7px 7px 0 var(--lacquer-night); font-weight: 900; transition: transform .2s ease; }
.final-controls button:hover { transform: translate(-3px, -3px); }
.final-badges > * { position: absolute; z-index: 3; }
.final-badges .praise-stamp { right: 12vw; top: 16vh; width: 170px; height: 120px; font-size: 34px; transform: rotate(-16deg); }
.final-badges .capsule-orb { right: 22vw; bottom: 18vh; }
.final-badges .ticket-ribbon { left: 9vw; bottom: 12vh; transform: rotate(-10deg); color: var(--lacquer-night); }
.final-badges .kanji-burst { right: 7vw; bottom: 8vh; color: var(--lacquer-night); animation: rotateBadge 5s linear infinite reverse; }
.confetti-field { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti { position: absolute; bottom: -30px; width: 12px; height: 20px; border: 2px solid var(--lacquer-night); background: var(--prize-yellow); animation: driftUp var(--duration, 4s) linear forwards; transform: rotate(var(--spin, 20deg)); }

.is-visible .approval-marquee,
.is-visible .diagonal-counter,
.is-visible .capsule-machine,
.is-visible .sticker-wall,
.is-visible .final-stack { animation: elasticIn .75s cubic-bezier(.15,1.35,.45,1) both; }

@keyframes blink { 50% { opacity: .35; transform: scale(.82); } }
@keyframes stampPulse { 0%,100% { transform: rotate(16deg) scale(1); } 50% { transform: rotate(16deg) scale(1.09); } }
@keyframes rotateBadge { to { transform: rotate(360deg); } }
@keyframes jitter { 0%,100% { transform: translate(0,0) rotate(-2deg); } 50% { transform: translate(4px,-3px) rotate(2deg); } }
@keyframes wobble { 0%,100% { transform: translate(0,0) rotate(-5deg); } 50% { transform: translate(8px,-12px) rotate(8deg); } }
@keyframes freshStamp { 0% { transform: scale(2.1) rotate(-18deg); opacity: 0; filter: blur(5px); } 100% { transform: scale(1) rotate(var(--r, 5deg)); opacity: 1; filter: blur(0); } }
@keyframes elasticIn { 0% { transform: translateY(70px) rotate(var(--start-rot, -5deg)) scale(.88); opacity: .1; } 70% { transform: translateY(-8px) rotate(var(--end-rot, 0deg)) scale(1.03); opacity: 1; } 100% { opacity: 1; } }
@keyframes driftUp { to { transform: translateY(-112vh) translateX(var(--sway, 80px)) rotate(720deg); opacity: 0; } }

@media (max-width: 820px) {
  .station-nav { right: 8px; transform: translateY(-50%) scale(.82); }
  .praise-station { padding-right: 56px; }
  .diagonal-counter { grid-template-columns: 1fr; transform: rotate(1deg); }
  .rubber-stamp { justify-self: start; }
  .capsule-story { position: relative; right: auto; top: auto; width: auto; margin-top: 40px; }
  .capsule-machine { justify-self: center; }
  .sticker-a, .sticker-d { right: 4%; }
  .barcode-meter { padding-right: 20px; }
  .barcode-meter em { display: none; }
  .ceremony-seal { position: static; margin-left: auto; margin-bottom: 16px; }
}