:root{--blue:#3b82f6;--sky:#7cc4ff;--soft:#bfe3ff;--deep:#1e3a8a;--ink:#0f2a4a;--white:#ffffff;--font-round:"Fredoka", system-ui, sans-serif;--font-soft:"Quicksand", system-ui, sans-serif;--ease:cubic-bezier(.16,1,.3,1);--glass:rgba(255,255,255,.6);--glass-brd:rgba(255,255,255,.8);--glass-sh:0 10px 28px rgba(20,45,95,.22);--card-sh:0 30px 90px rgba(20,45,95,.42);--gap:clamp(12px,3.6vw,16px)}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;width:100%}body{font-family:var(--font-soft);overflow:hidden;color:var(--ink);-webkit-font-smoothing:antialiased;overscroll-behavior:none;touch-action:none;-webkit-tap-highlight-color:transparent;background:#0b1526}#root{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center}canvas{display:block;touch-action:none}.frame{position:relative;overflow:hidden;width:100%;height:100%;background:linear-gradient(180deg,#eaf6ff,#c7e6ff 42%,#9fd0ff 78%,#7cc0ff)}@media (min-width:560px) and (min-height:560px){body{background:radial-gradient(60% 50% at 18% 18%,rgba(96,165,250,.28),transparent 60%),radial-gradient(55% 45% at 85% 80%,rgba(59,130,246,.22),transparent 60%),linear-gradient(180deg,#0b1a33,#0a1220)}.frame{width:auto;height:min(94vh,940px);aspect-ratio:9/16;border-radius:38px;box-shadow:0 50px 130px #040c1eb3,0 0 0 10px #ffffff0d,inset 0 0 0 1px #ffffff26}}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;display:flex;align-items:center;justify-content:center;pointer-events:none}.overlay>*{pointer-events:auto}.backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#0f2a4a6b;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.scrim{position:absolute;left:0;right:0;z-index:12;pointer-events:none}.scrim.top{top:0;height:24%;background:linear-gradient(180deg,rgba(15,42,74,.26),transparent)}.scrim.bottom{bottom:0;height:30%;background:linear-gradient(0deg,rgba(15,42,74,.3),transparent)}.chip{display:flex;align-items:center;gap:9px;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--glass-brd);border-radius:40px;box-shadow:var(--glass-sh);font-family:var(--font-round);color:var(--deep)}.whisper{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top) + 6vh);z-index:15;text-align:center;pointer-events:none;padding:0 9vw}.whisper h1{font-family:var(--font-round);font-weight:500;color:#fff;font-size:clamp(1.6rem,6.8vw,2.3rem);letter-spacing:.01em;line-height:1.15;text-shadow:0 2px 18px rgba(15,42,74,.55),0 8px 40px rgba(15,42,74,.35)}.whisper p{font-family:var(--font-soft);color:#eaf4ff;font-weight:500;font-size:clamp(.9rem,3.6vw,1.05rem);margin-top:.4em;opacity:.92;text-shadow:0 2px 12px rgba(15,42,74,.5)}.polaroid{background:#fff;padding:14px 14px 46px;border-radius:12px;box-shadow:0 30px 80px #1e3a8a73;max-width:min(82vw,380px);width:100%;transform-origin:center}.polaroid img,.polaroid video{width:100%;border-radius:6px;display:block;aspect-ratio:3/4;object-fit:cover;background:#dfeeff}.polaroid .cap{font-family:var(--font-round);text-align:center;margin-top:12px;color:var(--deep);font-size:1.05rem}.tap-hint{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 5vh);text-align:center;color:#fff;font-weight:600;font-size:.82rem;letter-spacing:.12em;z-index:16;pointer-events:none;text-shadow:0 2px 10px rgba(30,58,138,.55)}.action-hint{position:absolute;left:0;right:0;bottom:0;z-index:16;pointer-events:none;display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:12px 22px;padding-bottom:calc(12px + env(safe-area-inset-bottom));background:linear-gradient(0deg,#ffffff9e,#ffffff80 70%,#ffffff52);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid rgba(255,255,255,.6);box-shadow:0 -10px 30px #142d5f29;font-family:var(--font-round);font-weight:500;color:var(--deep)}.action-hint .ic{font-size:1.12rem;line-height:1;flex:0 0 auto}.action-hint .tx{font-size:clamp(.95rem,4vw,1.08rem);letter-spacing:.01em;text-align:center}.action-hint .dot{width:7px;height:7px;border-radius:50%;background:var(--blue);flex:0 0 auto;box-shadow:0 0 #3b82f673;animation:tapPulse 1.8s ease-out infinite}@keyframes tapPulse{0%{box-shadow:0 0 #3b82f673}70%{box-shadow:0 0 0 10px #3b82f600}to{box-shadow:0 0 #3b82f600}}.unmute{position:absolute;top:14px;right:14px;z-index:6;display:flex;align-items:center;gap:6px;font-family:var(--font-round);font-weight:500;font-size:.82rem;color:var(--deep);background:#ffffffb8;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.85);border-radius:40px;padding:7px 14px;cursor:pointer;box-shadow:0 8px 22px #142d5f47}.unmute:active{transform:scale(.95)}.reel-stage{position:absolute;top:0;right:0;bottom:0;left:0;z-index:22;background:#050b18;overflow:hidden}.reel-item{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}.reel-media{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;will-change:transform}.reel-bg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;filter:blur(30px) brightness(.5) saturate(1.1);will-change:transform}.reel-fg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain}.reel-vig{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;box-shadow:inset 0 0 160px #050b18bf;background:linear-gradient(180deg,rgba(5,11,24,.35) 0%,transparent 22%,transparent 62%,rgba(5,11,24,.7) 100%)}.reel-cap{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 9vh);text-align:center;padding:0 10vw;z-index:3;font-family:var(--font-round);font-weight:400;color:#fff;font-size:clamp(1.15rem,5vw,1.6rem);line-height:1.35;text-shadow:0 3px 22px rgba(0,0,0,.65)}.reel-dots{position:absolute;top:calc(env(safe-area-inset-top) + 3vh);left:50%;transform:translate(-50%);display:flex;gap:6px;z-index:4}.reel-dots i{width:6px;height:6px;border-radius:50%;background:#fff6;transition:all .5s var(--ease,ease)}.reel-dots i.on{background:#fff;width:20px;border-radius:6px}.reel-title{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;text-align:center;padding:0 12vw;z-index:5;color:#fff;font-family:var(--font-round);font-weight:500;font-size:clamp(1.8rem,8vw,2.8rem);text-shadow:0 4px 34px rgba(0,0,0,.6)}.reel-hint{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 3.5vh);left:0;right:0;z-index:4;text-align:center;color:#ffffffb8;font-size:.76rem;letter-spacing:.12em}.cinema{background:#0b1b34;padding:12px;border-radius:18px;box-shadow:0 40px 100px #0b1b34a6;max-width:min(88vw,420px);width:100%}.cinema video{width:100%;border-radius:10px;display:block;background:#000;max-height:66vh}.cinema .frame-note{color:#bcd6ff;text-align:center;font-size:.78rem;margin-top:10px;letter-spacing:.06em}.toast{position:absolute;left:0;right:0;top:46%;transform:translateY(-50%);z-index:17;pointer-events:none;text-align:center;padding:0 12vw;font-family:var(--font-round);font-weight:500;color:#fff;line-height:1.35;font-size:clamp(1.15rem,5.2vw,1.6rem);text-shadow:0 3px 22px rgba(15,42,74,.65),0 1px 3px rgba(15,42,74,.5)}.hud{position:absolute;z-index:14;pointer-events:none}.music{left:calc(env(safe-area-inset-left) + var(--gap));top:calc(env(safe-area-inset-top) + var(--gap));width:46px;height:46px;border-radius:50%;padding:0;display:grid;place-items:center;pointer-events:auto;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--glass-brd);box-shadow:var(--glass-sh);transition:transform .3s var(--ease),opacity .3s var(--ease)}.music:active{transform:scale(.93)}.music.muted{opacity:.7}.music .disc{width:34px;height:34px;border-radius:50%;background:conic-gradient(from 0deg,#3b82f6,#7cc4ff,#3b82f6);display:grid;place-items:center;color:#fff;font-size:15px;box-shadow:inset 0 0 0 3px #ffffff8c}.music.muted .disc{background:#7896be8c}.music.spin .disc{animation:spin 5s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.counter{right:calc(env(safe-area-inset-right) + var(--gap));top:calc(env(safe-area-inset-top) + var(--gap));padding:8px 16px;font-size:1.05rem;font-weight:500;letter-spacing:.02em}.counter .star{color:#ffd45e;filter:drop-shadow(0 0 6px rgba(255,212,94,.8))}.letter-sheet{background:linear-gradient(180deg,#fff,#f2f8ff);border-radius:18px;padding:clamp(24px,7vw,44px);max-width:min(88vw,460px);width:100%;max-height:78vh;overflow:hidden;box-shadow:0 40px 120px #1e3a8a80;text-align:center}.letter-sheet .to{font-family:var(--font-round);color:var(--blue);font-size:clamp(1.6rem,6vw,2.2rem);margin-bottom:1.2em}.letter-sheet p{font-family:var(--font-soft);color:var(--ink);font-weight:500;font-size:clamp(1.05rem,4vw,1.25rem);line-height:1.8;margin:0}.letter-sheet p.big{font-family:var(--font-round);color:var(--blue);font-weight:500;font-size:clamp(1.4rem,5.2vw,1.9rem);line-height:1.4}.letter-sheet .resolve{font-family:var(--font-round);color:var(--deep);font-weight:500;font-size:clamp(1.15rem,4.6vw,1.5rem);line-height:1.5}.env-wrap{position:relative;width:min(76vw,320px);aspect-ratio:3/2}.env-hint{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 12vh);text-align:center;color:#fff;font-weight:600;letter-spacing:.06em;font-size:.9rem;text-shadow:0 2px 12px rgba(30,58,138,.55);pointer-events:none}.ending-text{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4em;z-index:30;pointer-events:none;padding:0 10vw;text-align:center}.ending-text h1{font-family:var(--font-round);color:#fff;font-weight:500;font-size:clamp(1.9rem,8vw,3rem);text-shadow:0 6px 30px rgba(10,20,60,.6)}.ending-text p{font-family:var(--font-soft);color:#dbeafe;font-weight:500;font-size:clamp(1rem,4.4vw,1.25rem);text-shadow:0 3px 16px rgba(10,20,60,.6)}.gate{position:absolute;top:0;right:0;bottom:0;left:0;z-index:45;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 12vw;background:radial-gradient(120% 80% at 50% 22%,#fff6,#7cc0ff1f 55%,#3f82f626)}.gate-orb{width:60px;height:60px;border-radius:50%;margin:0 auto 26px;background:radial-gradient(circle at 35% 30%,#fff,#7cc4ff 55%,#3b82f6);box-shadow:0 0 50px 12px #7cc4ffb3}.gate h1{font-family:var(--font-round);color:#fff;font-weight:500;font-size:clamp(2rem,9vw,2.8rem);letter-spacing:.01em;text-shadow:0 4px 26px rgba(15,42,74,.5)}.gate-sub{font-family:var(--font-soft);color:#eaf4ff;opacity:.9;margin-top:10px;font-size:clamp(.92rem,4vw,1.05rem);text-shadow:0 2px 12px rgba(15,42,74,.5)}.gate .go{font-family:var(--font-round);font-weight:500;font-size:1.05rem;color:var(--deep);background:#ffffffd1;border:1px solid #fff;border-radius:40px;margin-top:30px;padding:15px 32px;cursor:pointer;box-shadow:0 18px 44px #142d5f59;transition:transform .3s var(--ease)}.gate .go:active{transform:scale(.95)}.lock-gate{justify-content:flex-start;padding-top:clamp(64px,15vh,150px)}.lock-q{font-family:var(--font-round);font-weight:500;color:#fff;font-size:clamp(1.15rem,5vw,1.5rem);margin-top:22px;text-shadow:0 3px 20px rgba(15,42,74,.5)}.lock-row{display:flex;gap:10px;justify-content:center;margin-top:16px}.lock-input{font-family:var(--font-round);font-weight:500;font-size:1.25rem;text-align:center;letter-spacing:.28em;color:var(--deep);width:min(58vw,210px);padding:13px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.85);background:#ffffffe6;outline:none;box-shadow:0 10px 30px #142d5f40}.lock-input::placeholder{color:#9db6d8;letter-spacing:.18em}.lock-input:focus{border-color:#fff;box-shadow:0 0 0 3px #7cc4ff80}.lock-btn{font-size:1.3rem;padding:0 16px;border-radius:16px;cursor:pointer;border:1px solid rgba(255,255,255,.85);background:#ffffffe6;box-shadow:0 10px 30px #142d5f40}.lock-err{font-family:var(--font-round);color:#fff;margin-top:14px;font-size:.92rem;min-height:1.2em;transition:opacity .3s;text-shadow:0 2px 12px rgba(15,42,74,.55)}.fade-black{position:absolute;top:0;right:0;bottom:0;left:0;background:#050a1a;z-index:60;pointer-events:none}