:root{
  --bg:#060a13; --bg2:#09111f; --gold:#f2cf79; --gold2:#c89438; --cream:#fff6dc;
  --muted:#b7b0a1; --line:rgba(239,197,103,.24); --card-w:clamp(58px,20.6vw,118px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{margin:0;background:var(--bg);scroll-behavior:smooth;scroll-padding-top:8px}
body{margin:0;min-width:320px;background:var(--bg);color:#fff;font-family:-apple-system,BlinkMacSystemFont,"Thonburi","Leelawadee UI",Tahoma,Arial,sans-serif;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.game-locked{overflow:hidden;touch-action:none}
button,a{font:inherit} button{cursor:pointer} a{text-decoration:none;color:inherit}
.site-bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:radial-gradient(circle at 50% 12%,rgba(204,151,57,.13),transparent 27%),radial-gradient(circle at 50% 78%,rgba(44,75,120,.13),transparent 35%),linear-gradient(180deg,#050810 0%,#09101d 46%,#050912 100%)}
.site-bg::before{content:"";position:absolute;inset:-20%;background:repeating-radial-gradient(circle at 50% 50%,rgba(255,224,145,.028) 0 1px,transparent 1px 18px);opacity:.2;transform:rotate(12deg)}
.ambient{position:absolute;border-radius:50%;filter:blur(70px);opacity:.42}.ambient-a{width:48vw;height:48vw;left:-18vw;top:10vh;background:rgba(145,93,23,.28);animation:driftA 10s ease-in-out infinite alternate}.ambient-b{width:54vw;height:54vw;right:-20vw;bottom:3vh;background:rgba(34,61,99,.26);animation:driftB 12s ease-in-out infinite alternate}@keyframes driftA{to{transform:translate(11vw,9vh) scale(1.08)}}@keyframes driftB{to{transform:translate(-8vw,-7vh) scale(.92)}}
.particles{position:absolute;inset:0;overflow:hidden}.particle{position:absolute;width:2px;height:2px;border-radius:50%;background:#ffe8a3;box-shadow:0 0 7px rgba(255,211,112,.78);opacity:0;will-change:opacity,transform;animation:twinkle var(--d) ease-in-out var(--delay) infinite}.particle.p-soft{width:1.5px;height:1.5px;box-shadow:0 0 5px rgba(255,220,143,.62)}.particle.p-mid{width:2.6px;height:2.6px;box-shadow:0 0 9px rgba(255,211,112,.84)}.particle.p-star{width:3.4px;height:3.4px;background:#fff0bd;box-shadow:0 0 5px #fff0bd,0 0 13px rgba(255,204,89,.86);animation-name:starTwinkle}@keyframes twinkle{0%,100%{opacity:.04;transform:scale(.62)}38%{opacity:calc(var(--o)*.42);transform:scale(1.05)}52%{opacity:var(--o);transform:scale(1.72)}67%{opacity:.16;transform:scale(.92)}}@keyframes starTwinkle{0%,100%{opacity:.02;transform:scale(.45) rotate(0)}43%{opacity:.2;transform:scale(.9) rotate(18deg)}50%{opacity:var(--o);transform:scale(1.9) rotate(35deg)}58%{opacity:.28;transform:scale(1.15) rotate(48deg)}}
main{position:relative;z-index:2}.section-dark{position:relative}.content-section{padding:72px 18px}.section-heading{text-align:center;width:min(92vw,620px);margin:0 auto 30px}.kicker{display:block;font-family:Georgia,"Times New Roman",serif;letter-spacing:.20em;font-size:11px;color:#c9ac6c;margin-bottom:9px}.section-heading h2{margin:0;color:#f4e0a7;font-size:clamp(26px,7vw,42px);line-height:1.3;font-weight:760}.section-heading p{margin:12px auto 0;color:#cfc8b8;font-size:14px;line-height:1.65;max-width:470px}
.reveal-on-scroll{opacity:0;transform:translateY(18px);transition:opacity .72s ease,transform .72s ease}.reveal-on-scroll.is-revealed{opacity:1;transform:none}
.gold-button{position:relative;border:1px solid rgba(255,224,145,.72);background:linear-gradient(180deg,#efd47e,#b27d29);color:#0e1018;font-weight:850;letter-spacing:.02em;padding:15px 30px;border-radius:999px;min-width:230px;box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 11px 36px rgba(204,150,46,.25);overflow:hidden;transition:transform .2s ease,opacity .2s}.gold-button::after{content:"";position:absolute;inset:-80% -30%;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.72) 49%,transparent 61%);transform:translateX(-85%) rotate(8deg);animation:sheen 3.5s ease-in-out infinite}@keyframes sheen{55%,100%{transform:translateX(105%) rotate(8deg)}}.gold-button:active{transform:scale(.975)}.gold-button:disabled{opacity:.48;cursor:default}
/* Hero */
.hero-section{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top)) 0 max(28px,env(safe-area-inset-bottom));overflow:hidden}.hero-frame{width:min(100%,560px);filter:drop-shadow(0 24px 48px rgba(0,0,0,.28))}.hero-frame img{display:block;width:100%;height:auto}.hero-cta{margin-top:-2px;position:relative;z-index:4}.hero-cta .gold-button{min-width:248px}
/* How to play */
.how-section{padding-top:78px}.steps{width:min(92vw,620px);margin:0 auto;display:grid;gap:13px}.step-card{display:grid;grid-template-columns:58px 1fr;gap:14px;align-items:center;padding:17px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(135deg,rgba(14,23,38,.86),rgba(7,12,22,.72));box-shadow:0 16px 36px rgba(0,0,0,.18);backdrop-filter:blur(8px)}.step-number{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(247,205,108,.5);color:#f0cf7c;font-family:Georgia,serif;font-size:25px;box-shadow:0 0 20px rgba(231,176,58,.08) inset}.step-card h3{margin:0 0 4px;color:#edc96e;font-size:20px}.step-card p{margin:0;color:#dad4c8;font-size:14px;line-height:1.55}.how-summary{margin:24px auto 0;width:min(92vw,620px);text-align:center;padding:20px 16px;border-top:1px solid rgba(242,202,109,.17);border-bottom:1px solid rgba(242,202,109,.17)}.how-summary strong{display:block;color:#f1cf7d;font-size:18px;letter-spacing:.04em}.how-summary span{display:block;margin-top:8px;color:#cfc8ba;line-height:1.6;font-size:14px}
/* Game full-screen zone */
.game-section{position:relative;min-height:100svh;overflow:hidden;border-top:1px solid rgba(240,200,106,.08);border-bottom:1px solid rgba(240,200,106,.08)}.game-prelude,.game-play,.result-panel{min-height:100svh}.game-prelude{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:max(26px,env(safe-area-inset-top)) 22px max(30px,env(safe-area-inset-bottom));transition:opacity .55s ease,transform .55s ease,visibility .55s}.game-prelude.is-hidden{opacity:0;visibility:hidden;pointer-events:none;transform:scale(.985);position:absolute;inset:0}.prelude-logo{width:min(62vw,330px);height:auto;filter:drop-shadow(0 12px 34px rgba(247,192,70,.18));animation:logoFloat 4.6s ease-in-out infinite}@keyframes logoFloat{50%{transform:translateY(-7px);filter:drop-shadow(0 17px 46px rgba(247,192,70,.28))}}.prelude-copy{margin:30px auto 26px;width:min(92vw,520px)}.prelude-copy h2{font-size:clamp(24px,6.2vw,36px);line-height:1.45;margin:0;color:#f5e2ae}.audio-note{font-size:11px;color:#8d897f;margin:13px 0 0}.game-play{display:flex;flex-direction:column;padding:max(12px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom));transition:opacity .55s ease,visibility .55s}.game-play.is-hidden{opacity:0;visibility:hidden;pointer-events:none;position:absolute;inset:0}.game-header{height:12.5vh;min-height:82px;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:20;transition:opacity .45s ease,transform .45s ease}.mini-logo{width:min(34vw,180px);height:auto;filter:drop-shadow(0 7px 20px rgba(245,190,72,.13))}.status-text{margin:2px 0 0;font-size:12px;color:#c7b993;letter-spacing:.04em;min-height:18px}.stage{position:relative;flex:1;width:min(100%,720px);margin:0 auto;min-height:390px;transition:opacity .35s ease,transform .35s ease}.card{position:absolute;left:50%;top:50%;width:var(--card-w);aspect-ratio:1080/1919;border:0;padding:0;background:transparent;transform:translate(-50%,-50%) scale(.72);opacity:0;cursor:pointer;will-change:left,top,transform,opacity,filter;transition:left .68s cubic-bezier(.2,.75,.2,1),top .68s cubic-bezier(.2,.75,.2,1),transform .68s cubic-bezier(.2,.75,.2,1),opacity .55s ease,filter .55s ease;filter:drop-shadow(0 8px 14px rgba(0,0,0,.48));z-index:3}.card img{width:100%;height:100%;display:block;object-fit:contain;user-select:none;-webkit-user-drag:none}.card.is-visible{opacity:1;transform:translate(-50%,-50%) scale(1)}.card.is-shuffling{filter:drop-shadow(0 10px 18px rgba(0,0,0,.55)) brightness(1.04)}.card.is-ready{animation:cardBreathe 2.6s ease-in-out var(--breathe-delay,0s) infinite;filter:drop-shadow(0 9px 18px rgba(0,0,0,.52)) drop-shadow(0 0 7px rgba(224,177,76,.12))}@keyframes cardBreathe{50%{filter:drop-shadow(0 12px 20px rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(234,185,79,.25));transform:translate(-50%,-50%) scale(1.025)}}.card.is-ready:active{animation:none;transform:translate(-50%,-50%) scale(.96)}.card.is-dimmed{opacity:0;transform:translate(-50%,-50%) scale(.80);filter:blur(3px) brightness(.5);pointer-events:none}.card.is-picked{z-index:20;animation:none;pointer-events:none;transform:translate(-50%,-50%) scale(1.06);filter:drop-shadow(0 13px 28px rgba(0,0,0,.68)) drop-shadow(0 0 14px rgba(247,198,82,.52))}.stage.is-leaving{opacity:0;transform:scale(.985)}.select-hint{position:absolute;left:50%;bottom:max(16px,calc(env(safe-area-inset-bottom) + 8px));transform:translateX(-50%) translateY(18px);z-index:15;text-align:center;opacity:0;pointer-events:none;transition:opacity .55s ease,transform .55s ease;width:92%}.select-hint.is-visible{opacity:1;transform:translateX(-50%) translateY(0)}.hint-kicker{display:block;font-family:Georgia,serif;font-size:10px;letter-spacing:.18em;color:#ad9460;margin-bottom:5px}.select-hint strong{font-size:clamp(23px,6vw,34px);line-height:1.45;color:#f6e4b5}
/* Result — approved v1.4 */
.result-panel{position:absolute;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;padding:max(18px,env(safe-area-inset-top)) 10px max(12px,env(safe-area-inset-bottom));opacity:0;visibility:hidden;pointer-events:none;transition:opacity .62s ease,visibility .62s;background:linear-gradient(180deg,rgba(5,9,17,.22),rgba(5,9,17,.12))}.result-panel.is-visible{opacity:1;visibility:visible;pointer-events:auto}.result-copy{flex:0 0 auto;text-align:center;min-height:88px;padding-top:2px}.result-kicker{display:block;font-family:Georgia,serif;letter-spacing:.18em;color:#bda264;font-size:10px;margin-bottom:2px}.result-copy strong{display:block;font-family:Georgia,"Times New Roman",serif;font-size:clamp(30px,8.3vw,43px);letter-spacing:.09em;color:#f0ce77;line-height:1.07}.result-copy>span:last-child{display:block;font-size:17px;color:#f0ece4;margin-top:5px;line-height:1.45}.result-card-wrap{position:relative;flex:1 1 auto;min-height:0;width:100%;display:grid;place-items:center;padding:8px 0 7px;overflow:visible;isolation:isolate}.result-card{position:relative;z-index:2;display:block;width:auto;height:auto;max-width:min(67vw,300px);max-height:min(59svh,610px);object-fit:contain;filter:drop-shadow(0 18px 26px rgba(0,0,0,.58));opacity:0;transform:scale(.965);transition:opacity .48s ease,transform .62s cubic-bezier(.18,.82,.22,1)}.result-panel.is-visible .result-card{opacity:1;transform:scale(1);animation:resultCardAura 3.25s ease-in-out .08s infinite}@keyframes resultCardAura{0%,100%{filter:drop-shadow(0 18px 26px rgba(0,0,0,.58)) drop-shadow(0 0 0 rgba(242,193,78,0))}50%{filter:drop-shadow(0 20px 29px rgba(0,0,0,.61)) drop-shadow(0 0 9px rgba(242,193,78,.18))}}.result-card-wrap::before{content:"";position:absolute;z-index:0;left:50%;top:51%;width:min(78vw,350px);height:min(52svh,500px);transform:translate(-50%,-50%) scale(.985);border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,211,112,.31) 0%,rgba(221,164,55,.17) 28%,rgba(143,91,20,.065) 50%,transparent 73%);filter:blur(24px);opacity:.48;pointer-events:none;will-change:opacity,transform;animation:ambientResultGlow 3.25s ease-in-out infinite}.result-card-wrap::after{content:"";position:absolute;z-index:1;left:50%;top:73%;width:min(60vw,270px);height:clamp(46px,8vh,78px);transform:translate(-50%,-50%) scale(.96);border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,218,126,.43) 0%,rgba(220,157,45,.20) 37%,rgba(137,83,14,.055) 62%,transparent 78%);filter:blur(18px);opacity:.38;pointer-events:none;will-change:opacity,transform;animation:underCardBreathe 3.25s ease-in-out .08s infinite}@keyframes ambientResultGlow{0%,100%{opacity:.42;transform:translate(-50%,-50%) scale(.98)}50%{opacity:.82;transform:translate(-50%,-50%) scale(1.055)}}@keyframes underCardBreathe{0%,100%{opacity:.30;transform:translate(-50%,-50%) scale(.93)}50%{opacity:.70;transform:translate(-50%,-50%) scale(1.08)}}.capture-note{flex:0 0 auto;width:min(92%,430px);display:flex;align-items:center;justify-content:center;gap:9px;padding:10px 13px;border:1px solid rgba(239,197,103,.26);border-radius:15px;background:rgba(8,13,23,.78);backdrop-filter:blur(9px);color:#f5ecd7;font-size:12px;line-height:1.45;text-align:left;box-shadow:0 12px 35px rgba(0,0,0,.22)}.capture-note strong{font-size:13px;color:#fff4d7}.capture-icon{color:#f2cf79;font-size:18px}.soft-scroll-button{flex:0 0 auto;border:0;background:transparent;color:#a89d84;text-decoration:underline;text-underline-offset:4px;padding:9px 12px 1px;font-size:11px}
/* Prepare + LINE */
.send-section{text-align:center}.info-list{width:min(92vw,520px);margin:0 auto;display:grid;gap:10px}.info-list>div{display:flex;align-items:center;gap:13px;padding:13px 16px;border-bottom:1px solid rgba(238,196,103,.14);color:#eee8da;text-align:left}.info-icon{font-family:Georgia,serif;color:#ddb85f;font-size:12px;letter-spacing:.08em}.example-box{width:min(92vw,560px);margin:26px auto 0;padding:19px 17px;border:1px solid rgba(239,197,103,.28);border-radius:20px;background:linear-gradient(135deg,rgba(19,28,42,.83),rgba(7,12,21,.75));box-shadow:0 17px 40px rgba(0,0,0,.19)}.example-label{display:block;color:#d6b45d;font-size:12px;letter-spacing:.04em;margin-bottom:8px}.example-box p{margin:0;color:#fff4dd;line-height:1.65;font-size:14px}.send-copy{margin:25px auto 20px;color:#cfc8ba;line-height:1.7;font-size:14px}.line-button{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:min(92vw,520px);
  min-height:56px;
  margin:0 auto;
  padding:13px 20px;
  border-radius:999px;
  border:1px solid rgba(255,232,169,.78);
  background:linear-gradient(180deg,#f3d77f 0%,#d8ad4b 50%,#b77d27 100%);
  color:#101522;
  font-size:14px;
  font-weight:850;
  letter-spacing:.005em;
  text-shadow:0 1px 0 rgba(255,255,255,.22);
  box-shadow:
    0 13px 34px rgba(188,132,36,.27),
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 1px 0 rgba(255,255,255,.24) inset;
  transition:transform .2s ease,filter .2s ease,box-shadow .2s ease;
}
.line-button::before{
  content:"LINE";
  flex:0 0 auto;
  display:grid;
  place-items:center;
  min-width:40px;
  height:29px;
  padding:0 7px;
  border-radius:10px 10px 10px 4px;
  background:#06c755;
  color:#fff;
  font-family:Arial,sans-serif;
  font-size:9px;
  font-weight:900;
  letter-spacing:.02em;
  border:1px solid rgba(255,255,255,.48);
  box-shadow:
    0 2px 7px rgba(0,0,0,.16),
    0 0 0 1px rgba(0,0,0,.04) inset;
}
.line-button:active{
  transform:scale(.98);
  filter:brightness(.97);
  box-shadow:
    0 8px 23px rgba(188,132,36,.22),
    0 0 0 1px rgba(255,255,255,.08) inset;
}
/* Moments */
.moments-section{padding-left:0;padding-right:0;overflow:hidden}.moments-section .section-heading{padding:0 18px}.carousel-wrap{width:100%;overflow:hidden}.moments-track{display:flex;gap:13px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:8px 7vw 18px;scroll-padding-left:7vw;-webkit-overflow-scrolling:touch}.moments-track::-webkit-scrollbar{display:none}.moment-card{flex:0 0 min(73vw,330px);aspect-ratio:4/5;margin:0;scroll-snap-align:start;border-radius:24px;overflow:hidden;border:1px solid rgba(237,196,102,.23);background:#0a0f19;box-shadow:0 17px 38px rgba(0,0,0,.30)}.moment-card img{width:100%;height:100%;display:block;object-fit:cover}.carousel-meta{display:flex;justify-content:space-between;align-items:center;width:min(86vw,520px);margin:2px auto 0;color:#8f887a;font-size:10px;letter-spacing:.14em}.carousel-meta strong{font-family:Georgia,serif;color:#c7ad72;font-size:12px}.moments-question{text-align:center;margin:35px auto 0;color:#d8cfbc;font-size:18px;line-height:1.6}.moments-question strong{color:#f0ce78}
/* Final */
.final-section{padding:74px 18px max(62px,calc(env(safe-area-inset-bottom) + 40px));text-align:center;min-height:72svh;display:flex;flex-direction:column;align-items:center;justify-content:center}.final-logo{width:min(58vw,300px);filter:drop-shadow(0 12px 34px rgba(247,192,70,.17));margin-bottom:28px}.final-copy{margin-bottom:23px}.final-copy p{margin:0;color:#d5cebe;line-height:1.7;font-size:15px}.brand-end{margin-top:34px;font-family:Georgia,serif;letter-spacing:.26em;color:#c5a760;font-size:13px}
@media (min-width:700px){:root{--card-w:112px}.hero-frame{max-width:520px}.steps{grid-template-columns:repeat(3,1fr)}.step-card{grid-template-columns:1fr;text-align:center;align-content:start}.step-number{margin:auto}.moment-card{flex-basis:300px}.result-card{max-width:300px}}
@media (max-height:700px){:root{--card-w:clamp(52px,18vw,84px)}.game-header{height:11vh;min-height:58px}.mini-logo{width:min(27vw,135px)}.stage{min-height:330px}.select-hint{bottom:4px}.result-copy{min-height:74px}.result-copy strong{font-size:25px}.result-card{max-width:min(55vw,235px);max-height:51svh}.result-card-wrap{padding:3px 0}.capture-note{padding:8px 11px}.soft-scroll-button{padding-top:4px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.2s!important;scroll-behavior:auto!important}}