*{box-sizing:border-box;margin:0;padding:0}:root{--paper: #fffdf7;--ink: #2a2622;--accent: #c2402f}html,body,#app{height:100%;width:100%}body{font-family:Segoe UI,Noto Sans,system-ui,sans-serif;color:var(--ink);overflow:hidden;background:#1c1c22 url(../img/bg/bg.webp) center / cover no-repeat fixed}#app{position:relative}.error-page{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;color:#b8b8c0;background:#101014;font-family:system-ui,sans-serif}.error-code{font-size:4rem;font-weight:700;letter-spacing:2px}.error-msg{font-size:1rem;opacity:.7}.loading-screen{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem}.loading-gif{max-width:40vw;max-height:40vh;image-rendering:auto}.loadbar{--w: min(360px, 75vw);position:relative;width:var(--w);margin-top:-4rem;margin-left:3rem;aspect-ratio:612 / 150}.loadbar:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--bar) left center / var(--w) 100% no-repeat;filter:grayscale(1) brightness(1.6);opacity:.25}.loadbar-fill{position:absolute;top:0;right:0;bottom:0;left:0;width:0%;overflow:hidden;background:var(--bar) left center / var(--w) 100% no-repeat;transition:width .2s ease}.start-btn{font-size:1.35rem;padding:1rem 2.8rem;margin-top:.5rem;outline:none;animation:start-pop .3s ease both}.start-btn:focus,.start-btn:focus-visible{outline:none}@keyframes start-pop{0%{opacity:0;transform:translateY(12px) scale(.9)}to{opacity:1;transform:none}}.mute-btn{position:fixed;left:16px;bottom:16px;z-index:10000;width:48px;height:48px;border:none;border-radius:50%;background:#00000073;color:#fff;font-size:1.4rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background .15s ease,transform .08s ease}.mute-btn:hover{background:#000000a6}.mute-btn:active{transform:scale(.92)}.trophy-btn{position:fixed;left:76px;bottom:16px;z-index:10000;width:48px;height:48px;border:none;border-radius:50%;background:#00000073;color:#fff;font-size:1.4rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background .15s ease,transform .08s ease}.trophy-btn:hover{background:#000000a6}.trophy-btn:active{transform:scale(.92)}.trophy-btn.is-active{background:#000000b3}.ach-panel{position:fixed;left:16px;bottom:76px;z-index:10001;width:min(440px,calc(100vw - 32px));max-height:min(82vh,720px);overflow-y:auto;padding:4rem 1.8rem 5.5rem;display:flex;flex-direction:column;gap:.6rem;background:url(../img/loading/button.png) center / 100% 100% no-repeat;color:var(--ink);filter:drop-shadow(0 10px 30px rgba(0,0,0,.5));transform:translateY(16px);opacity:0;visibility:hidden;pointer-events:none;transition:transform .25s ease,opacity .25s ease,visibility .25s}.ach-panel.is-open{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto}.ach-panel-title{font-weight:700;font-size:1.05rem;color:var(--ink);margin-bottom:.15rem}.ach-row{display:flex;align-items:center;gap:.7rem;padding:.5rem;border-radius:8px;background:#00000014}.ach-icon{width:44px;height:44px;flex:0 0 44px;object-fit:cover;border-radius:6px;background:#333}.ach-text{font-size:.9rem;line-height:1.35;color:var(--ink)}.ach-row.is-locked .ach-icon{filter:grayscale(1) brightness(.03) contrast(.2)}.ach-row.is-locked .ach-text{color:#2a26228c;font-style:italic}.ach-toast{position:fixed;right:16px;bottom:16px;z-index:10002;width:min(340px,calc(100vw - 32px));display:flex;align-items:center;gap:.75rem;padding:.8rem 1rem;background:url(../img/loading/button.png) center / 100% 100% no-repeat;color:var(--ink);filter:drop-shadow(0 8px 18px rgba(0,0,0,.45));transform:translateY(140%);opacity:0;transition:transform .4s cubic-bezier(.2,.9,.3,1.2),opacity .3s ease;pointer-events:none}.ach-toast.is-shown{transform:translateY(0);opacity:1}.ach-toast-icon{width:52px;height:52px;flex:0 0 52px;object-fit:cover;border-radius:6px;background:#333}.ach-toast-title{font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.5px;opacity:.8}.ach-toast-desc{font-size:.95rem;line-height:1.3;font-weight:600}.game-stage{display:flex;align-items:center;justify-content:center}.game-wrap{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1.2rem;width:min(720px,94vw)}.game-timer{position:relative;width:100%;height:22px;border-radius:11px;background:#0006;overflow:hidden}.game-timer-fill{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;background:linear-gradient(90deg,#6fbf73,#c9d84a);transition:width .1s linear,background .3s ease}.game-timer.is-low .game-timer-fill{background:linear-gradient(90deg,#d8593f,#e0a53f)}.game-timer-num{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;color:#1c1c1c;text-shadow:0 1px 1px rgba(255,255,255,.4)}.game-board{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;width:100%}.game-board.is-won{animation:game-won .5s ease}@keyframes game-won{0%,to{transform:scale(1)}50%{transform:scale(1.03)}}.card{border:none;padding:0;background:none;cursor:pointer;aspect-ratio:900 / 1261;perspective:800px}.card-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .35s ease;border-radius:8px;box-shadow:0 4px 10px #0006}.card.is-up .card-inner{transform:rotateY(180deg)}.card-face{position:absolute;top:0;right:0;bottom:0;left:0;backface-visibility:hidden;border-radius:8px;overflow:hidden}.card-back{background:var(--card-back) center / cover no-repeat}.card-front{transform:rotateY(180deg);background:#eee}.card-front img{width:100%;height:100%;object-fit:cover;display:block}.card.is-matched{cursor:default}.card.is-matched .card-inner{box-shadow:0 0 0 3px #6fbf73,0 4px 10px #0006}.card.is-matched .card-front{animation:card-pop .3s ease}@keyframes card-pop{0%{transform:rotateY(180deg) scale(1)}50%{transform:rotateY(180deg) scale(1.06)}to{transform:rotateY(180deg) scale(1)}}.game-quit{margin-top:.4rem}@media (max-width: 560px){.game-board{grid-template-columns:repeat(4,1fr)}}.stage{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}.photos{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.stage-center{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding:1.5rem;z-index:5}.qbox{width:min(560px,92vw);background:url(../img/loading/qbox.png) center / 100% 100% no-repeat;padding:7% 2% 2%;text-align:center;will-change:transform;visibility:hidden}.question{font-size:clamp(1.05rem,2.4vw,1.35rem);line-height:1.5;margin-bottom:1.25rem}.answers{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}.answer{font:inherit;font-size:1rem;font-weight:600;padding:.9rem 1.5rem;min-width:96px;border:none;background:url(../img/loading/button.png) center / 100% 100% no-repeat;color:var(--ink);cursor:pointer;transition:transform .08s ease,filter .15s ease}.answer:hover{filter:brightness(1.06) saturate(1.1);transform:translateY(-2px)}.answer:active{transform:translateY(1px)}.answer.evasive{z-index:9999}.ending-box{width:min(620px,92vw)}.ending-img{max-width:100%;max-height:45vh;border-radius:6px;margin-bottom:1rem}.ending-text{font-size:clamp(.95rem,2vw,1.1rem);line-height:1.6;text-align:left}.polaroid{position:absolute;transform:translate(-50%,-50%);width:fit-content;background:#fff;padding:8px 8px 26px;box-shadow:0 8px 18px #0006;will-change:transform}.polaroid img{display:block;width:auto;height:auto;max-width:clamp(240px,26vw,360px);max-height:clamp(240px,26vw,360px);background:#eee}.monoco{position:absolute;transform:translate(-20%,70%);width:clamp(40px,1vw,150px);z-index:2;padding:0;border:none;background:none;cursor:pointer;pointer-events:auto;filter:drop-shadow(0 4px 8px rgba(0,0,0,.45));opacity:0}.photos.is-pinned .monoco{opacity:1;transition:opacity .3s ease}.monoco img{width:100%;height:auto;display:block}.monoco.found{animation:monoco-found .6s ease forwards}@keyframes monoco-found{0%{transform:translate(-50%,-30%) scale(1)}40%{transform:translate(-50%,-55%) scale(1.25)}to{transform:translate(-50%,-90%) scale(.6);opacity:0}}@media (max-width: 600px){.qbox{padding:1.25rem 1rem}}
