*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Arial,sans-serif;background:linear-gradient(180deg,#0b6a43,#052d22);color:#fff}.app{width:min(100%,620px);margin:auto;min-height:100vh;padding:12px 14px 24px;background:radial-gradient(circle at 50% 18%,#1b956044,transparent 36%)}button{font:inherit}.topbar{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:start}.pill,.levelbox{border:2px solid #f3c94f;background:linear-gradient(#11794c,#083f2f);box-shadow:0 8px 18px #0005}.pill{border-radius:999px;padding:10px 14px;display:flex;align-items:center;gap:8px}.pill.right{justify-content:flex-end}.gp{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:#f3c94f;color:#4a246f;font-weight:900}.levelbox{border-radius:0 0 22px 22px;text-align:center;padding:7px 17px 11px}.levelbox small{display:block;color:#ffe8a0}.levelbox b{display:block;font-size:31px}.brand{display:flex;align-items:center;justify-content:center;gap:14px;padding:17px 0 11px}.pi-logo{display:grid;place-items:center;width:74px;height:74px;flex:0 0 74px;border-radius:50%;background:radial-gradient(circle,#7d3cc9,#451170);border:5px solid #f3c94f;color:#f3c94f;font-size:44px;font-weight:900;box-shadow:0 9px 20px #0006}.brand h1{margin:0;color:#f3c94f;font-family:Georgia,serif;font-size:40px;line-height:.95;text-shadow:0 3px #75480b}.brand h1 span{font-size:.8em;color:white}.brand p{margin:8px 0 0;color:#ffe8a3;font-size:13px;font-weight:700}.audio-panel,.mission-card{border-radius:18px;background:#063d2ee8;border:1px solid #f3c94f77;margin-bottom:11px}.audio-panel{display:grid;grid-template-columns:1fr auto;gap:10px;padding:12px 14px;align-items:center}.audio-panel small,.mission-card small{display:block;color:#bfddca;font-size:10px;letter-spacing:.12em}.audio-panel strong,.mission-card strong{display:block;margin-top:4px}.audio-panel span,.mission-card span{display:block;color:#ffe6a1;margin-top:3px;font-size:12px}.audio-actions{display:flex;gap:8px}.audio-actions button{width:44px;height:44px;border-radius:50%;border:2px solid #f3c94f;background:linear-gradient(#13895a,#0a4d38);color:white}.volume-wrap{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center}.volume-wrap input{width:100%}.mission-card{display:flex;justify-content:space-between;align-items:center;padding:12px 14px}.mission-badge{background:#f3c94f;color:#4a246f;border-radius:999px;padding:7px 10px;font-size:12px;font-weight:800}.status{display:flex;justify-content:space-between;gap:10px;color:#ffe9a8;font-size:12px;margin-bottom:9px}.board{position:relative;height:520px;border:2px solid #f3c94f88;border-radius:27px;background:linear-gradient(180deg,#074a36,#063729);box-shadow:inset 0 0 38px #0005,0 13px 28px #0005;overflow:hidden}.tile{position:absolute;width:68px;height:86px;border:0;border-radius:11px;background:linear-gradient(#fffef9,#eee6d6);color:#0b5e3c;font-size:30px;font-weight:900;box-shadow:0 6px 0 #c99238,0 9px 14px #0007;cursor:pointer;transition:.18s;transform-origin:center}.tile.pi{background:radial-gradient(circle,#7d3ecb 0 58%,#451070 59%);border:3px solid #f3c94f;color:#f3c94f}.tile.blocked{filter:brightness(.55) saturate(.7);cursor:not-allowed}.tile.free:hover{transform:translateY(-5px) scale(1.04)}.tile.selected{outline:4px solid #ffdf64;transform:translateY(-7px) scale(1.06);filter:drop-shadow(0 0 10px #ffdc5d)}.tile.matched{opacity:0;pointer-events:none;transform:scale(.25) rotate(12deg)}.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:15px 0}.tools button{position:relative;border:2px solid #f3c94f;border-radius:18px;padding:11px 7px;background:linear-gradient(#13895a,#0a4d38);color:white;font-size:21px;box-shadow:0 7px 15px #0004}.tools button:disabled{opacity:.45}.tools span{display:block;font-size:12px;font-weight:800}.tools em{position:absolute;right:8px;top:7px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#f3c94f;color:#4a246f;font-size:11px;font-style:normal;font-weight:900}.progress-wrap{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.progress{height:10px;border-radius:999px;background:#ffffff22;overflow:hidden}.progress div{height:100%;width:0;background:linear-gradient(90deg,#f3c94f,#6bd391);transition:.25s}.progress-wrap small{color:#c9dece}.bottom-nav{display:grid;grid-template-columns:repeat(4,1fr);margin:16px -14px 0;background:#052e23;border-top:1px solid #f3c94f88}.bottom-nav button{border:0;background:transparent;color:#dce9df;padding:12px 4px;font-size:20px}.bottom-nav span{display:block;font-size:12px;margin-top:4px}.bottom-nav .active{color:#ffe29a;background:#f3c94f22}footer{text-align:center;color:#bdd0c3;font-size:10px;padding:14px 4px 0}footer p{margin:4px 0}.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(100px);background:#161616e8;color:white;padding:11px 16px;border-radius:999px;opacity:0;transition:.25s;z-index:50;font-size:13px}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}@media(max-width:520px){.board{height:470px}.tile{width:56px;height:72px;font-size:25px}.brand h1{font-size:34px}.pi-logo{width:64px;height:64px;flex-basis:64px;font-size:38px}}