:root {
  --green: #b7e45d;
  --deep: #07120c;
  --glass: rgba(255, 255, 255, 0.14);
  --gold: #ffd780;
  --orange: #ffad48;
  --cream: #fff3cc;
  --text: #fff8e6;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #06100a; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; color: var(--text); }
button, input, select { font: inherit; }
button { cursor: pointer; border: 0; }

.phone-frame {
  position: relative;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  background: #06100a;
  isolation: isolate;
}

.stage {
  height: 100%;
  width: 100%;
  transition: transform 720ms cubic-bezier(.2,.75,.15,1);
}

.page {
  position: relative;
  width: 100%;
  height: 100dvh;
  padding: clamp(24px, 6vw, 46px) clamp(18px, 5vw, 44px);
  overflow: hidden;
}

.bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -3;
  transform: scale(1.04);
}
.bg-img.soft { filter: saturate(1.08) contrast(1.08) brightness(.86); object-position: 58% center; }
.bg-img.dim { filter: brightness(.62) saturate(1.1); object-position: 40% center; }
.bg-img.blur { filter: blur(4px) brightness(.58) saturate(1.18); transform: scale(1.1); }

.shade { position: absolute; inset: 0; z-index: -2; background: radial-gradient(circle at 62% 28%, rgba(255, 216, 125, .18), transparent 24%), linear-gradient(180deg, rgba(4, 10, 8, .2), rgba(3, 8, 5, .58) 56%, rgba(3, 8, 5, .88)); }
.shade.heavy { background: linear-gradient(180deg, rgba(3, 9, 6, .42), rgba(3, 9, 6, .75)), radial-gradient(circle at 20% 24%, rgba(205, 255, 117, .12), transparent 32%); }
.quest-shade { background: radial-gradient(circle at 68% 30%, rgba(255, 196, 79, .16), transparent 24%), linear-gradient(180deg, rgba(3, 8, 5, .52), rgba(3, 8, 5, .82)); }
.reserve-shade { background: linear-gradient(180deg, rgba(5, 10, 7, .54), rgba(2, 6, 4, .88)); }

.grain { pointer-events: none; position: absolute; inset: -20%; z-index: 7; opacity: .16; background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px); background-size: 4px 4px; animation: grain 1.4s steps(2) infinite; mix-blend-mode: soft-light; }
.ambient-glow { pointer-events: none; position: absolute; inset: 0; z-index: 1; background: radial-gradient(circle at 48% 78%, rgba(255, 176, 72, .18), transparent 18%), radial-gradient(circle at 78% 18%, rgba(200,255,119,.12), transparent 20%); mix-blend-mode: screen; }
@keyframes grain { 0%,100% { transform: translate(0,0); } 50% { transform: translate(2%, -1%); } }

.music-btn {
  position: fixed; top: 16px; right: 15px; z-index: 12;
  display: flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px;
  border-radius: 999px; color: #fff7dc;
  background: rgba(9, 23, 15, .52); border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(14px); box-shadow: 0 12px 30px rgba(0,0,0,.22);
}
.music-btn.playing .music-icon { animation: note 1.2s ease-in-out infinite; color: var(--green); }
@keyframes note { 50% { transform: translateY(-3px) rotate(-8deg); } }

.page-dots { position: fixed; right: 15px; top: 50%; transform: translateY(-50%); z-index: 12; display: grid; gap: 8px; }
.page-dots button { width: 7px; height: 7px; padding: 0; border-radius: 99px; background: rgba(255,255,255,.34); transition: .3s; }
.page-dots button.active { height: 22px; background: var(--green); box-shadow: 0 0 16px rgba(183,228,93,.65); }

.hero { display: flex; align-items: end; }
.sunbeam { position: absolute; top: -20%; left: 34%; width: 28%; height: 80%; z-index: -1; background: linear-gradient(180deg, rgba(255, 246, 193, .34), transparent 74%); filter: blur(20px); transform: rotate(7deg); mix-blend-mode: screen; animation: beam 5s ease-in-out infinite alternate; }
@keyframes beam { from { opacity: .35; } to { opacity: .7; transform: rotate(5deg) translateX(10px); } }
.hero-content { width: min(560px, 96vw); margin-bottom: 58px; position: relative; z-index: 2; animation: upIn .9s ease both; }
.limited-tag { display: inline-flex; padding: 8px 12px; margin-bottom: 16px; border-radius: 999px; background: rgba(255, 196, 79, .2); color: #ffe8a0; border: 1px solid rgba(255, 225, 147, .36); box-shadow: inset 0 0 18px rgba(255, 185, 72, .18); letter-spacing: .08em; font-weight: 700; font-size: 12px; }
.title-mask { margin: 0; font-size: clamp(52px, 16vw, 88px); line-height: .93; letter-spacing: -0.08em; font-weight: 900; text-shadow: 0 10px 28px rgba(0,0,0,.45), 0 0 1px #fff; background: linear-gradient(180deg, #fff9d8 8%, #b8ff64 50%, #5ebd55 90%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 5px 0 rgba(14,43,20,.5)); }
.subtitle { margin: 14px 0 16px; max-width: 470px; color: rgba(255, 248, 230, .86); font-size: 15px; line-height: 1.8; }
.time-card { width: min(430px, 100%); padding: 12px 14px; border-radius: 20px; background: rgba(5, 17, 10, .46); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 18px 50px rgba(0,0,0,.24); }
.time-card__label { font-size: 12px; color: rgba(255,255,255,.7); margin-bottom: 6px; }
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.countdown span { display: block; text-align: center; padding: 8px 2px; border-radius: 14px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.74); font-size: 12px; }
.countdown b { display: block; color: var(--cream); font-size: 22px; line-height: 1; }
.hero-actions, .quest-actions { display: flex; gap: 12px; margin-top: 18px; }
.btn { min-width: 112px; min-height: 46px; padding: 0 18px; border-radius: 999px; font-weight: 800; transition: transform .2s, box-shadow .2s; }
.btn:active { transform: scale(.96); }
.btn.primary { background: linear-gradient(135deg, #efff8b, #83db49 58%, #38a057); color: #14320e; box-shadow: 0 12px 30px rgba(143,222,72,.28); }
.btn.ghost { color: #fff9e6; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(12px); }
.scroll-tip { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); color: rgba(255,255,255,.68); font-size: 12px; letter-spacing: .12em; animation: tip 1.4s ease-in-out infinite; }
@keyframes tip { 50% { transform: translate(-50%, -6px); opacity: 1; } }

.floating-leaves i { position: absolute; top: -30px; width: 18px; height: 9px; border-radius: 100% 0 100% 0; background: rgba(202,255,117,.48); filter: blur(.1px); animation: fall 9s linear infinite; }
.floating-leaves i:nth-child(1){ left: 10%; animation-delay: 0s; }
.floating-leaves i:nth-child(2){ left: 34%; animation-delay: 1.6s; transform: scale(.8); }
.floating-leaves i:nth-child(3){ left: 60%; animation-delay: 3s; }
.floating-leaves i:nth-child(4){ left: 78%; animation-delay: 4.1s; transform: scale(.7); }
.floating-leaves i:nth-child(5){ left: 88%; animation-delay: 5.3s; }
@keyframes fall { to { transform: translate(-44px, 110vh) rotate(260deg); } }

.section-head { position: relative; z-index: 2; margin-top: 20px; }
.section-head span { color: var(--green); font-size: 12px; letter-spacing: .18em; font-weight: 800; }
.section-head h2 { margin: 8px 0 8px; font-size: clamp(34px, 10vw, 58px); line-height: 1; letter-spacing: -0.06em; text-shadow: 0 10px 22px rgba(0,0,0,.34); }
.section-head p { margin: 0; color: rgba(255,248,230,.72); line-height: 1.6; }
.section-head.light { margin-top: 28px; }

.scene-grid { position: relative; z-index: 2; margin-top: 26px; display: grid; gap: 12px; }
.scene-card { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: center; padding: 10px; border-radius: 24px; background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.15); backdrop-filter: blur(16px); box-shadow: 0 18px 44px rgba(0,0,0,.18); transform: translateY(18px); opacity: 0; animation: upIn .6s ease forwards; }
.page.active .scene-card:nth-child(1){ animation-delay:.05s; }
.page.active .scene-card:nth-child(2){ animation-delay:.14s; }
.page.active .scene-card:nth-child(3){ animation-delay:.23s; }
.page.active .scene-card:nth-child(4){ animation-delay:.32s; }
.scene-thumb { position: relative; height: 84px; border-radius: 18px; overflow: hidden; background: rgba(255,255,255,.12); }
.camp-thumb { background: linear-gradient(135deg, rgba(31,91,51,.72), rgba(232,182,91,.34)), url('assets/naiwa_forest_camp.png') center/300% auto; }
.drink-thumb { background: radial-gradient(circle at 35% 45%, rgba(255,255,255,.82), transparent 10%), linear-gradient(135deg, rgba(164,247,255,.42), rgba(120,213,116,.38), rgba(255,230,134,.46)); }
.brand-thumb { background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(183,228,93,.24)), radial-gradient(circle at 35% 28%, #fff4bf, transparent 22%), linear-gradient(160deg, #253323, #08130a); }
.fire-thumb { background: radial-gradient(circle at 50% 74%, rgba(255,156,34,.86), transparent 26%), linear-gradient(180deg, #172119, #0a0c07); }
.frog-dot { position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #f8f7a4, #b7df46 64%, #87b12e); color: #315214; font-size: 13px; font-weight: 900; box-shadow: 0 8px 16px rgba(0,0,0,.24); }
.scene-info h3 { margin: 0 0 4px; font-size: 17px; }
.scene-info p { margin: 0; line-height: 1.45; font-size: 13px; color: rgba(255,248,230,.74); }
.scene-info small { display: block; margin-top: 6px; color: #d6ff82; font-size: 11px; }
.bubble { position: absolute; display: block; border-radius: 50%; border: 1px solid rgba(255,255,255,.62); background: rgba(255,255,255,.18); animation: bubble 2.8s ease-in-out infinite; }
.b1{ width: 22px; height:22px; left: 20px; bottom: 16px; }
.b2{ width: 12px; height:12px; left: 46px; bottom: 38px; animation-delay:.4s; }
.b3{ width: 16px; height:16px; left: 32px; bottom: 54px; animation-delay:.8s; }
@keyframes bubble { 50% { transform: translateY(-14px); opacity: .68; } }
.flame { position: absolute; left: 30px; bottom: 18px; width: 28px; height: 42px; background: radial-gradient(circle at 50% 78%, #fff2a8 0 18%, #ffb347 33%, #e94b24 60%, transparent 68%); border-radius: 50% 50% 45% 45%; filter: blur(.2px); animation: flame 1.1s infinite alternate; mix-blend-mode: screen; }
@keyframes flame { to { transform: scale(1.12) skewX(-6deg); filter: blur(1px); } }
.next-btn { position: absolute; z-index: 2; left: 50%; bottom: 28px; transform: translateX(-50%); min-width: 210px; height: 48px; border-radius: 999px; color: #14320e; font-weight: 900; background: linear-gradient(135deg, #fff5a7, #b3ec55); box-shadow: 0 16px 38px rgba(141, 221, 70, .28); }

.quest-area { position: relative; z-index: 2; height: 46vh; min-height: 330px; margin-top: 18px; border-radius: 32px; background: radial-gradient(circle at 40% 40%, rgba(255, 218, 119, .13), transparent 30%), rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(12px); overflow: hidden; }
.quest-area::before { content:""; position:absolute; inset: 20px; border: 1px dashed rgba(255,255,255,.2); border-radius: 24px; }
.collect-frog { position: absolute; display: grid; place-items: center; gap: 2px; width: 88px; height: 96px; border-radius: 30px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.18); color: #fff4ce; transition: .32s; }
.collect-frog span { width: 54px; height: 48px; border-radius: 50% 50% 44% 44%; background: radial-gradient(circle at 35% 30%, #fff7ae 0 8%, #d8e84f 34%, #97bd3e 80%); position: relative; box-shadow: inset -8px -8px 18px rgba(57, 87, 14, .18), 0 14px 28px rgba(0,0,0,.22); }
.collect-frog span::before, .collect-frog span::after { content:""; position:absolute; top: 14px; width: 7px; height: 7px; border-radius:50%; background:#10240d; box-shadow: 0 0 0 4px rgba(255,255,255,.5); }
.collect-frog span::before { left: 15px; } .collect-frog span::after { right: 15px; }
.collect-frog em { font-style: normal; font-size: 12px; font-weight: 700; }
.collect-frog.f1 { left: 9%; top: 15%; animation: bob 2.5s ease-in-out infinite; }
.collect-frog.f2 { right: 10%; top: 32%; animation: bob 2.6s .4s ease-in-out infinite; }
.collect-frog.f3 { left: 42%; bottom: 12%; animation: bob 2.7s .8s ease-in-out infinite; }
.collect-frog.collected { transform: scale(.9); opacity: .52; box-shadow: 0 0 0 999px rgba(183,228,93,.015); }
.collect-frog.collected::after { content:"✓"; position:absolute; top: -8px; right: -6px; width: 26px; height: 26px; border-radius: 50%; background: var(--green); color:#10240d; display:grid; place-items:center; font-weight:900; }
@keyframes bob { 50% { transform: translateY(-10px); } }

.coupon { position: absolute; left: 18px; right: 18px; bottom: 18px; padding: 14px 16px; border-radius: 20px; background: linear-gradient(135deg, rgba(255,247,184,.9), rgba(184,239,92,.9)); color: #173611; transform: translateY(120%); transition: .5s cubic-bezier(.2,.8,.2,1); box-shadow: 0 20px 40px rgba(0,0,0,.24); }
.coupon.show { transform: translateY(0); }
.coupon b { font-size: 18px; } .coupon p { margin: 4px 0 0; font-size: 12px; }
.progress-card { position: relative; z-index: 2; margin-top: 16px; padding: 16px; border-radius: 22px; background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.15); backdrop-filter: blur(14px); }
.progress-title { display:flex; justify-content:space-between; margin-bottom:10px; color: rgba(255,255,255,.8); }
.progress-bar { height: 10px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.14); }
.progress-bar i { display:block; width: 0%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #fff3a5, #9ee14b); transition: .45s; }

.reserve-card { position: relative; z-index: 2; margin-top: 26px; padding: 18px; border-radius: 32px; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(18px); box-shadow: 0 24px 60px rgba(0,0,0,.24); }
.quota { display: grid; gap: 10px; margin-bottom: 16px; }
.quota > div { display: flex; justify-content: space-between; color: rgba(255,255,255,.82); }
.quota b { color: #fff9de; }
.quota i { height: 10px; border-radius: 99px; overflow: hidden; background: rgba(255,255,255,.16); }
.quota em { display:block; width:68%; height:100%; background: linear-gradient(90deg, #fff3a5, #ffb24e, #b7e45d); border-radius: 99px; }
form { display:grid; gap: 12px; }
label { display:grid; gap: 6px; color: rgba(255,255,255,.78); font-size: 13px; }
input, select { width:100%; min-height: 46px; border-radius: 16px; padding: 0 14px; border: 1px solid rgba(255,255,255,.16); background: rgba(1,8,5,.46); color: #fff8e6; outline: none; }
input::placeholder { color: rgba(255,255,255,.38); }
select { appearance: none; }
.submit { margin-top: 6px; height: 50px; border-radius: 18px; background: linear-gradient(135deg, #fff0a8, #b7e45d 58%, #55bb58); color: #193711; font-weight: 900; box-shadow: 0 16px 36px rgba(117,201,69,.25); }
.text-link { display:block; width:100%; margin-top: 14px; background: transparent; color: #e8ffa1; text-decoration: underline; }

.modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: end center; padding: 18px; background: rgba(0,0,0,.55); opacity: 0; visibility: hidden; transition: .25s; }
.modal.show { opacity: 1; visibility: visible; }
.modal-panel { width: min(520px, 100%); max-height: 78vh; overflow: auto; padding: 22px; border-radius: 30px; background: linear-gradient(180deg, rgba(20, 38, 24, .92), rgba(7, 16, 10, .94)); border: 1px solid rgba(255,255,255,.17); backdrop-filter: blur(18px); box-shadow: 0 30px 80px rgba(0,0,0,.45); transform: translateY(24px); transition: .32s; }
.modal.show .modal-panel { transform: translateY(0); }
.modal-close { position: sticky; top: 0; float: right; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 24px; line-height: 1; }
.modal h3 { margin: 8px 0 10px; font-size: 25px; color: #fff9d6; }
.modal p, .modal li { color: rgba(255,248,230,.78); line-height: 1.75; }
.modal ul { padding-left: 18px; }
.modal .mini-map { margin-top: 12px; height: 260px; border-radius: 24px; overflow: hidden; background: radial-gradient(circle at 28% 32%, rgba(183,228,93,.6), transparent 12%), radial-gradient(circle at 66% 44%, rgba(119,215,255,.46), transparent 12%), radial-gradient(circle at 58% 72%, rgba(255,166,67,.55), transparent 12%), linear-gradient(135deg, #152415, #07100b); position: relative; }
.mini-map span { position:absolute; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff8e6; font-size: 12px; border: 1px solid rgba(255,255,255,.18); }
.mini-map span:nth-child(1){ left: 22%; top: 24%; }
.mini-map span:nth-child(2){ right: 15%; top: 40%; }
.mini-map span:nth-child(3){ left: 32%; bottom: 18%; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 25; transform: translate(-50%, 120px); padding: 12px 18px; border-radius: 999px; background: rgba(10, 26, 15, .88); color: #eaffba; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 14px 34px rgba(0,0,0,.34); transition: .35s; white-space: nowrap; }
.toast.show { transform: translate(-50%, 0); }

@keyframes upIn { from { transform: translateY(22px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

@media (min-width: 700px) {
  body { display: grid; place-items: center; background: #10160f; }
  .phone-frame { width: min(430px, 100vw); height: min(932px, 100dvh); border-radius: 30px; box-shadow: 0 30px 100px rgba(0,0,0,.56); }
  .page { height: 100%; }
  .stage { height: 100%; }
}

@media (max-height: 720px) {
  .hero-content { margin-bottom: 36px; }
  .scene-card { grid-template-columns: 78px 1fr; padding: 8px; }
  .scene-thumb { height: 70px; }
  .section-head h2 { font-size: 34px; }
  .quest-area { min-height: 270px; height: 40vh; }
}