html,body,#root{width:100%;height:100%;margin:0;padding:0}body{overflow:hidden}:root{--sea:#1aa6c4;--sea-deep:#0d7a92;--sand:#fff4e0;--coral:#ff7a59;--ink:#243b4a}*{box-sizing:border-box}.app{width:100vw;min-height:100vh;color:var(--ink);background:linear-gradient(160deg,#2bc0e4 0%,#1aa6c4 40%,#0d7a92 100%);font-family:Nunito,system-ui,-apple-system,sans-serif}.screen{min-height:100vh;padding:32px;position:relative}.center{text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}.screen h1{color:#fff;text-shadow:0 2px 8px #0003;margin:12px 0 28px;font-size:2rem}.brand{color:#fff;text-shadow:0 3px 10px #00000040;font-size:2.6rem;font-weight:900}.brand.small{opacity:.95;font-size:1.4rem}.hint{color:#ffffffd9;margin-top:28px;font-size:.9rem}.back{color:#fff;cursor:pointer;background:#fff3;border:none;border-radius:999px;padding:10px 16px;font-size:1rem;font-weight:700;position:absolute;top:24px;left:24px}.back:hover{background:#ffffff52}.card-grid{flex-wrap:wrap;justify-content:center;gap:20px;max-width:720px;display:flex}.card{background:var(--sand);cursor:pointer;border:none;border-radius:24px;flex-direction:column;justify-content:center;align-items:center;gap:14px;width:200px;min-height:160px;padding:28px 24px;transition:transform .12s,box-shadow .12s;display:flex;box-shadow:0 8px 24px #0000002e}.card:hover{transform:translateY(-4px);box-shadow:0 14px 32px #00000040}.card-emoji{font-size:3rem}.card-title{color:var(--ink);font-size:1.15rem;font-weight:800}.card-sub{color:var(--sea-deep);opacity:.8;font-size:.85rem;font-weight:700}.card.big{width:240px;min-height:220px}.card.big .card-emoji{font-size:4rem}.card.locked{opacity:.5;cursor:default}.card.locked:hover{transform:none;box-shadow:0 8px 24px #0000002e}.pin-dots{gap:18px;margin:8px 0 18px;display:flex}.dot{background:#ffffff4d;border:2px solid #fff;border-radius:50%;width:20px;height:20px}.dot.filled{background:#fff}.error{color:#ffd9d0;margin:4px 0 16px;font-weight:800}.keypad{grid-template-columns:repeat(3,80px);gap:14px;display:grid}.key{background:var(--sand);height:80px;color:var(--ink);cursor:pointer;border:none;border-radius:50%;font-size:1.8rem;font-weight:800;box-shadow:0 6px 16px #0000002e}.key:active{transform:scale(.94)}.shake{animation:.4s shake}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-8px)}75%{transform:translate(8px)}}.viewer{background:#0a2030;flex-direction:column;width:100vw;height:100dvh;display:flex;overflow:hidden}:is(.viewer:fullscreen,.viewer.fs){width:100vw;height:100vh}.viewer-top{color:#fff;background:#00000059;flex-shrink:0;align-items:center;gap:clamp(8px,1.5vw,16px);padding:clamp(8px,1.2vh,14px) clamp(12px,2vw,24px);transition:opacity .3s,transform .3s;display:flex}.viewer-top .back{position:static}.viewer-meta{opacity:.85;font-size:clamp(.8rem,1.4vw,1rem);font-weight:700}.viewer-title{white-space:nowrap;margin-left:auto;font-size:clamp(.9rem,1.6vw,1.15rem);font-weight:800}.fs-btn{color:#fff;cursor:pointer;white-space:nowrap;background:#ffffff2e;border:none;border-radius:999px;padding:10px 16px;font-size:clamp(.8rem,1.3vw,1rem);font-weight:700}.fs-btn:hover{background:#ffffff4d}.stage{flex:auto;justify-content:center;align-items:center;min-height:0;padding:clamp(8px,1.5vh,20px);display:flex;position:relative}.frame-img{object-fit:contain;border-radius:14px;width:auto;max-width:100%;height:auto;max-height:100%;box-shadow:0 12px 40px #00000080}.viewer.fs .frame-img{box-shadow:none;border-radius:0}.zone{cursor:pointer;background:0 0;border:none;width:30%;position:absolute;top:0;bottom:0}.zone:disabled{cursor:default}.zone-prev{left:0}.zone-next{right:0}.caption{color:#fff;text-shadow:0 2px 6px #0000004d;letter-spacing:.5px;white-space:nowrap;z-index:2;background:#ff7a59f2;border-radius:999px;max-width:92vw;padding:clamp(8px,1.2vh,16px) clamp(20px,4vw,44px);font-size:clamp(1.3rem,4vw,3rem);font-weight:900;position:absolute;bottom:clamp(16px,5vh,48px);left:50%;transform:translate(-50%);box-shadow:0 8px 24px #0006}.controls{background:#00000059;flex-shrink:0;justify-content:center;align-items:center;gap:clamp(12px,2vw,28px);padding:clamp(8px,1.4vh,16px) clamp(12px,2vw,24px);transition:opacity .3s,transform .3s;display:flex}.nav{background:var(--coral);color:#fff;cursor:pointer;white-space:nowrap;border:none;border-radius:999px;padding:clamp(10px,1.4vh,14px) clamp(20px,3vw,32px);font-size:clamp(.9rem,1.6vw,1.2rem);font-weight:800}.nav:disabled{opacity:.35;cursor:default}.progress{color:#fff;text-align:center;min-width:64px;font-size:clamp(.9rem,1.5vw,1.1rem);font-weight:800}.dots-row{flex-wrap:wrap;flex:1;justify-content:center;gap:8px;max-width:50vw;display:flex}.pip{cursor:pointer;background:#ffffff4d;border-radius:50%;width:clamp(9px,1vw,13px);height:clamp(9px,1vw,13px);transition:transform .15s}.pip.on{background:var(--coral);transform:scale(1.3)}.song-slide{transition:opacity .4s}.big-play{color:#fff;pointer-events:none;background:#ff7a59eb;border-radius:50%;justify-content:center;align-items:center;width:clamp(80px,12vw,130px);height:clamp(80px,12vw,130px);padding-left:.4rem;font-size:clamp(2.5rem,5vw,4rem);display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 10px 30px #00000073}.song-controls{gap:clamp(10px,1.6vw,20px)}.nav.round{border-radius:50%;justify-content:center;align-items:center;width:clamp(48px,6vw,60px);height:clamp(48px,6vw,60px);padding:0;font-size:clamp(1.3rem,2.5vw,1.8rem);display:flex}.nav.round.play{background:#2bc0e4}.song-bar{cursor:pointer;background:#ffffff40;border-radius:999px;flex:1;max-width:55vw;height:12px;overflow:hidden}.song-bar-fill{background:var(--coral);border-radius:999px;height:100%;transition:width .2s linear}.viewer.chrome-hidden{cursor:none}.viewer.chrome-hidden .viewer-top{opacity:0;pointer-events:none;transform:translateY(-100%)}.viewer.chrome-hidden .controls{opacity:0;pointer-events:none;transform:translateY(100%)}.home-stage{color:#fff}.home-card{text-align:center}.home-card .big-emoji{font-size:clamp(5rem,14vw,11rem)}.home-card h2{margin:8px 0;font-size:clamp(1.6rem,4vw,3rem)}.home-card p{opacity:.9;margin:6px 0;font-size:clamp(1rem,2vw,1.4rem)}.home-card .dim{opacity:.6}.controller-bg{background:linear-gradient(160deg,#2bc0e4 0%,#0d7a92 100%);flex-direction:column;justify-content:center;align-items:center;gap:12px;width:100vw;min-height:100dvh;padding:clamp(10px,2vw,24px);display:flex}.ctrl-shell{flex-direction:column;flex:auto;width:min(820px,100%);height:100%;min-height:0;display:flex}.phone-screen{min-height:0;color:var(--ink);background:linear-gradient(170deg,#fff8ee 0%,#ffe9d6 100%);border-radius:clamp(16px,3vw,28px);flex-direction:column;flex:1;display:flex;overflow:hidden;box-shadow:0 16px 50px #0000004d}.phone-head{justify-content:space-between;align-items:center;padding:20px 22px 12px;font-size:.95rem;font-weight:800;display:flex}.phone-dot{background:#34d058;border-radius:50%;width:9px;height:9px;margin-left:auto;margin-right:4px;display:inline-block}.phone-body{flex-direction:column;flex:1;gap:clamp(12px,1.6vw,18px);min-height:0;padding:clamp(10px,2vw,24px) clamp(16px,3vw,32px) clamp(16px,3vw,28px);display:flex;overflow-y:auto}.phone-body h3{margin:4px 0;font-size:1.4rem}.phone-hint{color:var(--sea-deep);margin:0;font-size:.9rem;font-weight:600}.phone-big{cursor:pointer;background:#fff;border:2px solid #0000000f;border-radius:22px;flex-direction:column;align-items:center;gap:6px;padding:22px;font-size:2.6rem;font-weight:800;display:flex;box-shadow:0 6px 16px #0000001a}.phone-big span{color:var(--ink);font-size:1.1rem}.phone-big:active{transform:scale(.97)}.phone-link{color:var(--sea-deep);cursor:pointer;text-align:left;background:0 0;border:none;padding:0;font-size:.95rem;font-weight:800}.phone-frame-num{color:var(--sea-deep);font-weight:800}.phone-word{background:var(--coral);color:#fff;text-align:center;border-radius:18px;justify-content:center;align-items:center;min-height:90px;padding:24px 16px;font-size:1.8rem;font-weight:900;display:flex}.phone-nav-row{gap:12px;margin-top:auto;display:flex}.phone-nav{cursor:pointer;background:#fff;border:2px solid #00000014;border-radius:16px;flex:1;padding:20px;font-size:1.2rem;font-weight:800}.phone-nav.next{background:var(--coral);color:#fff;border-color:var(--coral)}.phone-nav:active{transform:scale(.97)}.phone-song-controls{justify-content:center;gap:14px;margin-top:20px;display:flex}.phone-round{cursor:pointer;background:#fff;border:none;border-radius:50%;width:72px;height:72px;font-size:1.8rem;font-weight:800;box-shadow:0 6px 16px #0000001f}.phone-round.play{background:var(--coral);color:#fff;width:88px;height:88px;font-size:2.2rem}.phone-round:active{transform:scale(.94)}.hint.light{color:#ffffffe6}@media (width>=600px){.phone-head{padding:22px 28px 14px;font-size:1.1rem}.phone-body h3{font-size:1.8rem}.phone-hint{font-size:1.05rem}.phone-body{flex-flow:wrap;align-content:flex-start}.phone-body>.phone-link,.phone-body>h3,.phone-body>.phone-hint,.phone-body>.phone-word,.phone-body>.phone-word.silent,.phone-body>.phone-frame-num,.phone-body>.phone-nav-row,.phone-body>.phone-song-controls,.phone-body>.phone-card-grid,.phone-body>.bg-music,.phone-body>.phone-input,.phone-body>.phone-upload{flex:1 0 100%}.phone-body>.phone-big{flex:calc(50% - 12px);justify-content:center;min-height:150px}.phone-big span{font-size:1.3rem}}@media (width>=900px){.phone-body>.phone-big{flex-basis:calc(33.333% - 12px);min-height:170px;font-size:3rem}.phone-word{min-height:120px;font-size:2.4rem}.phone-nav{padding:26px;font-size:1.5rem}.phone-round{width:92px;height:92px;font-size:2.2rem}.phone-round.play{width:108px;height:108px;font-size:2.6rem}}.audio-unlock{color:#fff;text-align:center;z-index:5;cursor:pointer;background:#000000d1;border-radius:18px;padding:22px 34px;font-size:clamp(1.1rem,2.5vw,1.8rem);font-weight:800;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 10px 30px #00000080}.phone-word{flex-direction:column;gap:6px}.phone-word-label{text-transform:uppercase;letter-spacing:1px;opacity:.85;font-size:.85rem;font-weight:800}.phone-word-text{line-height:1.1}.phone-word.silent{color:var(--sea-deep);background:#0000000f;font-size:1.15rem;font-weight:800}.flashstage,.wheelstage,.memorystage,.combinestage,.listenstage{flex-direction:column;gap:2vh;overflow:hidden}.flashstage.spotlight{justify-content:space-between;padding-bottom:0}.flash-hero{flex-direction:column;flex:auto;justify-content:center;align-items:center;gap:clamp(8px,1.5vh,18px);width:100%;min-height:0;display:flex}.flash-hero img{border-radius:20px;width:auto;max-width:80vw;height:auto;max-height:62vh;animation:.35s heroPop;box-shadow:0 18px 50px #0000008c}.flash-hero-label{color:#fff;background:var(--coral);border-radius:999px;padding:clamp(6px,1vh,12px) clamp(24px,4vw,48px);font-size:clamp(1.8rem,5vw,3.6rem);font-weight:900;box-shadow:0 8px 24px #0006}@keyframes heroPop{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.flash-strip{background:#0000004d;flex-wrap:nowrap;flex-shrink:0;justify-content:center;align-items:center;gap:clamp(6px,1vw,14px);width:100%;padding:clamp(8px,1.5vh,16px) clamp(8px,2vw,20px);display:flex;overflow-x:auto}.flash-thumb{opacity:.45;border-radius:10px;flex:none;transition:opacity .2s,transform .2s,box-shadow .2s;overflow:hidden}.flash-thumb img{width:auto;height:clamp(54px,9vh,96px);display:block}.flash-thumb.active{opacity:1;box-shadow:0 0 0 3px var(--coral), 0 8px 20px #00000080;transform:translateY(-6px)scale(1.08)}.wheel-wrap{width:min(60vh,60vw);height:min(60vh,60vw);position:relative}.wheel-pointer{color:var(--coral);z-index:3;filter:drop-shadow(0 2px 3px #000);font-size:2.4rem;position:absolute;top:-6px;left:50%;transform:translate(-50%)}.wheel{border:8px solid #fff;border-radius:50%;width:100%;height:100%;position:relative;overflow:hidden;box-shadow:0 12px 40px #00000080}.wedge{transform-origin:0 100%;clip-path:polygon(0 0,100% 0,50% 100%);justify-content:center;align-items:flex-start;width:50%;height:50%;display:flex;position:absolute;top:0;left:50%}.wedge img{border-radius:6px;width:40%;margin-top:12%}.wheel-result{z-index:4;background:#fffffff2;border-radius:20px;flex-direction:column;align-items:center;gap:8px;padding:18px 26px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 12px 40px #00000080}.wheel-result img{border-radius:12px;width:clamp(110px,16vw,200px)}.wheel-word{color:var(--ink);font-size:clamp(1.6rem,4vw,3rem);font-weight:900}.memory-grid{gap:clamp(8px,1.4vw,16px);display:grid}.mem-card{aspect-ratio:3/4;cursor:default;border-radius:12px;width:clamp(80px,11vw,150px);transition:transform .3s;overflow:hidden;box-shadow:0 6px 16px #0006}.mem-card img{object-fit:cover;width:100%;height:100%}.mem-card.up{transform:rotateY(0)}.mem-card.matched{box-shadow:0 0 0 4px #34d058,0 6px 16px #0006}.combine-row{align-items:center;gap:clamp(14px,3vw,40px);display:flex}.combine-card{flex-direction:column;align-items:center;gap:8px;transition:opacity .3s,transform .3s;display:flex}.combine-card img{border-radius:14px;width:clamp(120px,18vw,240px);box-shadow:0 10px 30px #00000080}.combine-card span{color:#fff;font-size:clamp(1.2rem,3vw,2.2rem);font-weight:900}.combine-card.dim{opacity:.25}.combine-card.on{opacity:1}.combine-plus{color:#fff;font-size:clamp(2rem,5vw,4rem);font-weight:900}.combine-together{color:#fff;background:var(--coral);border-radius:999px;margin-top:2vh;padding:12px 32px;font-size:clamp(1.8rem,5vw,3.6rem);font-weight:900;box-shadow:0 8px 24px #0006}.listen-prompt{color:#fff;font-size:clamp(1.6rem,4vw,3rem);font-weight:900}.listen-row{gap:clamp(20px,5vw,60px);display:flex}.listen-card{border-radius:16px;transition:transform .2s,box-shadow .2s;overflow:hidden;box-shadow:0 8px 24px #0006}.listen-card img{width:clamp(140px,22vw,300px);display:block}.listen-card.right{transform:scale(1.06);box-shadow:0 0 0 6px #34d058,0 8px 24px #00000080}.listen-result{margin-top:2vh;font-size:clamp(1.6rem,4vw,3rem);font-weight:900}.listen-result.good{color:#34d058}.listen-result.bad{color:#ffd166}.confetti{pointer-events:none;z-index:6;position:absolute;inset:0;overflow:hidden}.confetti-piece{border-radius:2px;width:11px;height:16px;animation:2.4s linear forwards fall;position:absolute;top:-10px}@keyframes fall{to{opacity:.9;transform:translateY(105vh)rotate(720deg)}}.phone-card-grid{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.phone-mini{cursor:pointer;color:var(--ink);background:#fff;border:2px solid #00000014;border-radius:12px;padding:12px 4px;font-size:.8rem;font-weight:800}.phone-mini:active{background:var(--sand);transform:scale(.95)}.mem-card{position:relative}.mem-num{color:#fff;text-shadow:0 2px 6px #0009;pointer-events:none;font-size:clamp(1.4rem,3vw,2.6rem);font-weight:900;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.bg-music{border-top:1px solid #00000014;flex-direction:column;align-items:center;gap:6px;margin-top:14px;padding-top:14px;display:flex}.bg-music-row{align-items:center;gap:12px;width:100%;display:flex}.phone-round.small{flex-shrink:0;width:48px;height:48px;font-size:1.3rem}.bg-slider{accent-color:var(--coral);flex:1;height:6px}.bg-music-label{color:var(--sea-deep);opacity:.8;font-size:.8rem;font-weight:700}.birthdaystage{background:radial-gradient(circle at 50% 30%,#3a2a6a 0%,#1a1140 70%);flex-direction:column;overflow:hidden}.bday-card{z-index:4;flex-direction:column;align-items:center;gap:2vh;display:flex}.bday-photo{object-fit:cover;border:8px solid #fff;border-radius:50%;width:clamp(180px,28vw,380px);height:clamp(180px,28vw,380px);box-shadow:0 12px 40px #00000080}.bday-photo.placeholder{background:#ffffff1a;justify-content:center;align-items:center;font-size:clamp(5rem,12vw,10rem);display:flex}.bday-title{color:#ffd166;text-shadow:0 3px 12px #00000080;font-size:clamp(2rem,6vw,4.5rem);font-weight:900}.bday-name{color:#fff;background:var(--coral);border-radius:999px;padding:8px 36px;font-size:clamp(1.6rem,5vw,3.5rem);font-weight:900;box-shadow:0 8px 24px #0006}.balloons{pointer-events:none;z-index:1;position:absolute;inset:0}.balloon{border-radius:50%;width:56px;height:70px;animation:6s ease-in infinite floatUp;position:absolute;bottom:-120px}.balloon:after{content:"";background:#fff6;width:1px;height:60px;position:absolute;top:100%;left:50%}@keyframes floatUp{0%{opacity:0;transform:translateY(0)rotate(-4deg)}15%{opacity:1}to{opacity:.9;transform:translateY(-110vh)rotate(4deg)}}.classroom-btn{background:linear-gradient(135deg,#ffd166,#ff7a59)}.phone-input{text-align:center;width:100%;color:var(--ink);border:2px solid #0000001a;border-radius:14px;padding:14px;font-size:1.1rem;font-weight:700}.phone-upload{text-align:center;color:var(--sea-deep);cursor:pointer;background:#fff;border:2px dashed #0003;border-radius:14px;padding:14px;font-size:.95rem;font-weight:800;display:block}.phone-upload:active{transform:scale(.98)}.float-age{text-shadow:0 3px 10px #00000080;font-size:clamp(2.5rem,6vw,5rem);font-weight:900;animation:6.5s ease-in infinite floatUp;position:absolute;bottom:-80px}.bday-age{color:#ffd166;text-shadow:0 2px 8px #00000080;font-size:clamp(1.2rem,3vw,2rem);font-weight:800}