:root{--pink-50:#fff5fa;--pink-100:#ffe9f3;--pink-200:#ffd6e8;--pink-300:#ffb8d6;--pink-400:#ff8fbf;--pink-500:#f56aa3;--pink-600:#d94e87;--peach:#ffd9c0;--cream:#fff8f0;--text:#6b3a52;--text-soft:#9b6b82;--white:#fff;--shadow-soft:0 10px 30px #f56aa32e;--shadow-card:0 6px 18px #f56aa324;--radius:22px;--radius-sm:16px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0}body{min-height:100vh;color:var(--text);background:linear-gradient(160deg,#fff5fa 0%,#ffe9f3 45%,#ffe3d6 100%) fixed;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Quicksand,system-ui,sans-serif;overflow-x:hidden}.bg-floaters{pointer-events:none;z-index:0;position:fixed;inset:0;overflow:hidden}.floater{opacity:0;will-change:transform, opacity;font-size:22px;animation:linear infinite floatUp;position:absolute;bottom:-40px}@keyframes floatUp{0%{opacity:0;transform:translateY(0)rotate(0)}10%{opacity:.85}90%{opacity:.85}to{opacity:0;transform:translateY(-110vh)rotate(40deg)}}.page{z-index:1;max-width:640px;margin:0 auto;padding:28px 18px 80px;position:relative}.card{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--radius);box-shadow:var(--shadow-soft);background:#ffffffd1;border:1px solid #ffb8d680;margin-bottom:22px;padding:26px 22px}.center{text-align:center}h1{letter-spacing:-.01em;margin:0 0 10px;font-size:1.7rem;font-weight:800;line-height:1.25}h2{margin:0 0 14px;font-size:1.35rem;font-weight:800}p{color:var(--text);margin:0 0 12px;line-height:1.6}.subtitle{color:var(--text-soft);font-size:1rem}.eyebrow{letter-spacing:.14em;text-transform:uppercase;color:var(--pink-500);background:var(--pink-100);border-radius:999px;margin-bottom:14px;padding:5px 12px;font-size:.72rem;font-weight:700;display:inline-block}.gate-wrap{z-index:1;justify-content:center;align-items:center;min-height:100vh;padding:24px 18px;display:flex;position:relative}.gate{text-align:center;width:100%;max-width:420px}.lock-emoji{margin-bottom:6px;font-size:3rem;animation:2.4s ease-in-out infinite pulse;display:block}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}.gate-video{aspect-ratio:16/11;margin:0 0 18px}.gate-hint{background:linear-gradient(135deg, var(--pink-100), var(--peach));border:1px dashed var(--pink-300);border-radius:var(--radius-sm);color:var(--pink-600);margin-bottom:18px;padding:12px 16px;font-size:.92rem;font-weight:600;line-height:1.45;animation:.5s fadeInUp}.input{border:2px solid var(--pink-200);background:var(--white);width:100%;color:var(--text);text-align:center;border-radius:999px;outline:none;padding:15px 18px;font-size:1.05rem;transition:border-color .2s,box-shadow .2s}.input:focus{border-color:var(--pink-400);box-shadow:0 0 0 4px #ff8fbf33}.input.shake{border-color:var(--pink-500);animation:.4s shake}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-5px)}80%{transform:translate(5px)}}.btn{width:100%;color:var(--white);background:linear-gradient(135deg, var(--pink-400), var(--pink-500));cursor:pointer;box-shadow:var(--shadow-card);border:none;border-radius:999px;margin-top:14px;padding:15px 20px;font-size:1.05rem;font-weight:700;transition:transform .12s,box-shadow .2s}.btn:active{transform:scale(.97)}.error-msg{color:var(--pink-600);min-height:1.4em;margin-top:14px;font-weight:600;animation:.3s fadeIn}.video-box{border-radius:var(--radius-sm);border:2px dashed var(--pink-300);background:linear-gradient(135deg, var(--pink-100), var(--peach));aspect-ratio:16/10;text-align:center;justify-content:center;align-items:center;margin:18px 0 6px;display:flex;overflow:hidden}.video-box .ph{padding:18px}.video-box .ph .cam{margin-bottom:8px;font-size:2.4rem;display:block}.video-box video{object-fit:cover;width:100%;height:100%;display:block}.video-box.playing{aspect-ratio:9/16;border-style:solid;border-color:var(--pink-300);background:#000;max-width:320px;margin:0 auto 6px}.video-box.playing video{object-fit:contain}.gate-video.playing{margin:0 auto 18px}.video-frame{aspect-ratio:9/16;width:100%;max-width:300px;box-shadow:0 18px 44px #f56aa34d, 0 0 0 5px #ffffffd9, 0 0 0 7px var(--pink-200);background:#000;border-radius:26px;margin:22px auto 6px;position:relative;overflow:hidden}.video-frame video{object-fit:cover;width:100%;height:100%;display:block}.unmute-overlay{color:var(--pink-600);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:var(--shadow-card);cursor:pointer;z-index:2;white-space:nowrap;background:#ffffffeb;border:none;border-radius:999px;align-items:center;gap:6px;padding:9px 15px;font-size:.84rem;font-weight:700;animation:2s ease-in-out infinite pulse;display:inline-flex;position:absolute;top:14px;left:50%;transform:translate(-50%)}.unmute-overlay:active{transform:translate(-50%)scale(.95)}@media (min-width:700px){.video-frame{max-width:340px}}.sim-stage{flex-direction:column;align-items:center;margin:10px 0 18px;display:flex}.crystal{filter:drop-shadow(0 0 10px #28c882a6);will-change:transform;margin-bottom:2px;animation:3.2s ease-in-out infinite crystalFloat;display:block}@keyframes crystalFloat{0%,to{transform:translateY(0)rotate(-5deg)}50%{transform:translateY(-9px)rotate(5deg)}}.crystal-bump{animation:.5s crystalPop}@keyframes crystalPop{0%{transform:translateY(-9px)scale(1)}45%{transform:translateY(-16px)scale(1.25)}to{transform:translateY(0)scale(1)}}.avatar{background:radial-gradient(circle at 50% 38%, #fff 0%, var(--pink-100) 55%, var(--peach) 100%);width:116px;height:116px;box-shadow:0 12px 28px #f56aa347, inset 0 0 0 2px var(--pink-200);z-index:1;border:4px solid #fff;border-radius:50%;justify-content:center;align-items:center;display:flex;position:relative}.avatar-emoji{font-size:3.6rem;line-height:1}.avatar-img{object-fit:cover;object-position:center 25%;border-radius:50%;width:100%;height:100%;display:block}.avatar-bump{animation:.45s avatarBump}@keyframes avatarBump{0%{transform:scale(1)}40%{transform:scale(1.08)rotate(-3deg)}to{transform:scale(1)}}.avatar-podium{background:radial-gradient(#f56aa34d 0%,#f56aa300 70%);border-radius:50%;width:130px;height:22px;margin-top:-8px}.stats-panel{border:1px solid var(--pink-200);border-radius:var(--radius-sm);background:#fff9;margin-bottom:18px;padding:14px 14px 8px}.stat-row{align-items:center;gap:10px;margin-bottom:11px;display:flex}.stat-name{color:var(--text);flex:0 0 44%;align-items:center;gap:5px;font-size:.78rem;font-weight:700;line-height:1.15;display:flex}.stat-emoji{font-size:.95rem}.stat-track{background:var(--pink-100);border-radius:999px;flex:1;height:12px;overflow:hidden;box-shadow:inset 0 1px 2px #d94e8726}.stat-fill{background:linear-gradient(90deg, var(--pink-300), var(--pink-500));border-radius:999px;width:0;height:100%;transition:width .55s cubic-bezier(.34,1.56,.64,1);display:block;box-shadow:0 0 8px #f56aa380}@media (min-width:700px){.stat-name{font-size:.88rem}.stat-row{margin-bottom:13px}.avatar{width:132px;height:132px}.avatar-emoji{font-size:4.2rem}}.progress-head{justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px;display:flex}.progress-count{color:var(--pink-600);white-space:nowrap;font-weight:800}.progress-track{background:var(--pink-100);border-radius:999px;height:16px;overflow:hidden;box-shadow:inset 0 1px 3px #d94e8726}.progress-fill{background:linear-gradient(90deg, var(--pink-300), var(--pink-500));border-radius:999px;height:100%;transition:width .5s cubic-bezier(.34,1.56,.64,1);box-shadow:0 0 12px #f56aa380}.bag{text-align:center;margin:4px 0 2px;font-size:3.4rem;transition:transform .3s}.bag.bump{animation:.45s bump}@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.18)rotate(-4deg)}to{transform:scale(1)}}.grid{grid-template-columns:repeat(2,1fr);gap:12px;margin-top:14px;display:grid}@media (min-width:480px){.grid{grid-template-columns:repeat(3,1fr)}}.item{border:2px solid var(--pink-200);background:var(--white);border-radius:var(--radius-sm);text-align:center;cursor:pointer;box-shadow:var(--shadow-card);-webkit-user-select:none;user-select:none;padding:14px 8px;transition:transform .12s,border-color .2s,background .2s,opacity .2s;position:relative}.item:active{transform:scale(.95)}.item .ico{margin-bottom:6px;font-size:1.9rem;display:block}.item .lbl{color:var(--text);font-size:.82rem;font-weight:600;line-height:1.2}.item.packed{border-color:var(--pink-400);background:linear-gradient(135deg, var(--pink-100), #fff);cursor:default}.item.packed:after{content:"✓";color:var(--white);background:var(--pink-500);border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;font-size:.7rem;font-weight:800;animation:.35s pop;display:flex;position:absolute;top:6px;right:8px}.item.wiggle{animation:.5s wiggle}@keyframes wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.3)}to{transform:scale(1)}}.feedback{border-radius:var(--radius-sm);text-align:center;margin-top:16px;padding:14px 16px;font-weight:600;animation:.35s fadeInUp}.feedback.good{background:linear-gradient(135deg, var(--pink-100), var(--peach));color:var(--pink-600);border:1px solid var(--pink-200)}.feedback.bad{background:var(--cream);color:var(--text-soft);border:1px dashed var(--pink-300)}.feedback .tag{letter-spacing:.1em;text-transform:uppercase;opacity:.8;margin-bottom:4px;font-size:.72rem;display:block}.countdown{text-align:center}.countdown .label{color:var(--text-soft);margin-bottom:10px;font-size:.95rem}.clock{justify-content:center;gap:10px;display:flex}.clock .unit{background:var(--white);min-width:62px;box-shadow:var(--shadow-card);border:1px solid var(--pink-200);border-radius:14px;padding:10px 6px}.clock .num{color:var(--pink-600);font-size:1.6rem;font-weight:800;line-height:1}.clock .cap{text-transform:uppercase;letter-spacing:.08em;color:var(--text-soft);margin-top:4px;font-size:.68rem}.final{background:linear-gradient(160deg, #fff, var(--pink-100));border:2px solid var(--pink-300);animation:.6s revealPop}.final .block{margin-bottom:14px}.final .block .label{color:var(--pink-600);margin-bottom:2px;font-weight:800;display:block}.final .closing{color:var(--pink-600);margin-top:18px;font-size:1.1rem;font-weight:700}@keyframes revealPop{0%{opacity:0;transform:scale(.92)}60%{transform:scale(1.02)}to{opacity:1;transform:scale(1)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:.5s fadeIn}.fade-in-up{animation:.5s fadeInUp}.start-btn{margin-top:18px;animation:2.6s ease-in-out infinite pulse}.mute-btn{z-index:5;color:var(--pink-600);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid var(--pink-200);cursor:pointer;box-shadow:var(--shadow-card);opacity:.78;background:#ffffffd1;border-radius:999px;max-width:60vw;padding:9px 15px;font-size:.8rem;font-weight:700;transition:opacity .2s,transform .12s;position:fixed;bottom:14px;right:14px}.mute-btn:hover{opacity:1}.mute-btn:active{transform:scale(.95)}.mute-btn:disabled{cursor:default;opacity:.55}.logout-btn{z-index:5;color:var(--pink-600);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid var(--pink-200);cursor:pointer;box-shadow:var(--shadow-card);opacity:.7;background:#fffc;border-radius:999px;padding:8px 14px;font-size:.8rem;font-weight:700;transition:opacity .2s,transform .12s;position:fixed;bottom:14px;left:14px}.logout-btn:hover{opacity:1}.logout-btn:active{transform:scale(.95)}.locked-note{text-align:center;color:var(--text-soft);margin-top:6px;font-size:.92rem}@media (min-width:700px){.page{max-width:760px;padding:44px 28px 100px}.card{border-radius:28px;margin-bottom:26px;padding:34px}h1{font-size:2.2rem}h2{font-size:1.75rem}p{font-size:1.08rem;line-height:1.65}.subtitle{font-size:1.08rem}.eyebrow{font-size:.78rem}.grid{grid-template-columns:repeat(4,1fr);gap:16px}.item{padding:18px 10px}.item .ico{font-size:2.3rem}.item .lbl{font-size:.95rem}.bag{font-size:4.4rem}.progress-track{height:20px}.progress-count{font-size:1.1rem}.clock{gap:14px}.clock .unit{min-width:84px;padding:14px 10px}.clock .num{font-size:2.1rem}.clock .cap{font-size:.74rem}.feedback{padding:16px 20px;font-size:1.05rem}.video-box.playing{max-width:380px}.gate{max-width:480px}.gate-video.playing{max-width:360px}.lock-emoji{font-size:3.4rem}.input{padding:17px 20px;font-size:1.12rem}.btn{padding:17px 22px;font-size:1.12rem}.logout-btn{padding:10px 18px;font-size:.9rem;bottom:20px;left:20px}}@media (min-width:1000px){.page{max-width:820px}.bag{font-size:5rem}}@media (prefers-reduced-motion:reduce){*{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}