:root{--bosco: #1F2C1E;--bosco-soft: #2B3B2A;--crema: #F5EFE2;--latte: #FBF8F2;--oro: #B8945A;--oro-light: #D4B584;--ink: #1A1A17;--line: rgba(245, 239, 226, .18);--shadow-lg: 0 20px 50px rgba(0,0,0,.35), 0 4px 12px rgba(0,0,0,.18);--shadow-md: 0 6px 20px rgba(0,0,0,.18);--ease: cubic-bezier(.22, 1, .36, 1)}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%}body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-weight:600;color:var(--crema);background:radial-gradient(circle at 20% 10%,rgba(184,148,90,.08),transparent 40%),radial-gradient(circle at 80% 90%,rgba(212,181,132,.06),transparent 40%),linear-gradient(180deg,var(--bosco-soft) 0%,var(--bosco) 100%);min-height:100dvh;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}button,input,select,textarea{font-family:inherit;font-weight:600;color:inherit}button{border:none;background:none;cursor:pointer}.serif{font-family:Fraunces,Georgia,serif;letter-spacing:-.01em}.app{min-height:100dvh;max-width:480px;margin:0 auto;padding:max(20px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:18px}.app-header{display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px}.brand-logo{width:38px;height:38px;border-radius:50%;background:var(--oro);display:grid;place-items:center;color:var(--bosco);font-weight:900;font-family:Fraunces,serif;font-size:14px}.brand-name{font-family:Fraunces,serif;font-size:18px;font-weight:700}.tile-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.tile{border-radius:22px;padding:22px 14px;display:flex;flex-direction:column;align-items:center;gap:10px;background:#f5efe20f;border:2px solid var(--line);transition:transform .15s var(--ease),background .15s var(--ease);min-height:140px;justify-content:center}.tile:active{transform:scale(.96)}.tile-emoji{font-size:44px;line-height:1}.tile-icon{display:grid;place-items:center}.tile-name{font-family:Fraunces,serif;font-size:18px;font-weight:600;color:var(--crema)}.pin-display{display:flex;gap:14px;justify-content:center;margin:30px 0}.pin-dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--oro-light);background:transparent;transition:transform .15s var(--ease),background .15s var(--ease)}.pin-dot.filled{background:var(--oro);transform:scale(1.15)}.pin-dot.error{background:#c24747;border-color:#c24747;animation:shake .3s}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:320px;margin:0 auto;width:100%}.key{height:70px;border-radius:18px;background:#f5efe214;border:1.5px solid var(--line);font-family:Fraunces,serif;font-size:30px;font-weight:700;display:grid;place-items:center;transition:transform .1s var(--ease),background .1s var(--ease)}.key:active{transform:scale(.94);background:#f5efe229}.key.action{font-size:18px;background:transparent}.section-title{font-family:Fraunces,serif;font-size:22px;font-weight:700}.section-sub{font-size:13px;color:#f5efe2b3;margin-top:2px}.mission{background:#f5efe20f;border:2px solid var(--line);border-radius:18px;padding:16px;display:flex;align-items:center;gap:14px;transition:transform .15s var(--ease)}.mission:active{transform:scale(.99)}.mission-emoji{flex-shrink:0;width:56px;height:56px;display:grid;place-items:center;background:#b8945a2e;border-radius:14px;color:var(--oro-light)}.mission-body{flex:1;min-width:0}.mission-title{font-size:15px;font-weight:700;line-height:1.3}.mission-desc{font-size:12px;color:#f5efe2a6;margin-top:3px;line-height:1.35}.mission-xp{font-family:Fraunces,serif;font-size:16px;font-weight:700;color:var(--oro-light);white-space:nowrap}.mission.completed{background:#7fd17a1f;border-color:#7fd17a4d}.mission.completed .mission-emoji{background:#7fd17a38}.check{width:32px;height:32px;border-radius:50%;background:#7fd17a;color:var(--bosco);display:grid;place-items:center;font-weight:900;font-size:18px}.stats{background:#b8945a1f;border:2px solid rgba(184,148,90,.3);border-radius:22px;padding:22px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}.stat-l{font-size:11px;color:#f5efe2b3;text-transform:uppercase;letter-spacing:.08em}.stat-v{font-family:Fraunces,serif;font-size:30px;font-weight:700;color:var(--oro-light);margin-top:2px;line-height:1}.stat-sub{font-size:11px;color:#f5efe299;margin-top:4px}.tabs{display:flex;gap:6px;padding:6px;background:#f5efe20f;border-radius:16px}.tab{flex:1;padding:12px 8px;border-radius:12px;font-size:13px;font-weight:700;text-align:center;transition:background .15s var(--ease),color .15s var(--ease)}.tab.active{background:var(--oro);color:var(--bosco)}.lb-row{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:#f5efe20d}.lb-row.me{background:#b8945a2e;border:1.5px solid rgba(184,148,90,.4)}.lb-pos{font-family:Fraunces,serif;font-size:22px;font-weight:700;width:28px;text-align:center;color:#f5efe299}.lb-pos.gold{color:gold}.lb-pos.silver{color:silver}.lb-pos.bronze{color:#cd7f32}.lb-avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center}.lb-name{flex:1;font-size:14px;font-weight:700}.lb-xp{font-family:Fraunces,serif;font-size:18px;font-weight:700;color:var(--oro-light)}.ach-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}.ach{background:#f5efe20d;border:2px solid var(--line);border-radius:16px;padding:14px 8px;text-align:center;transition:transform .15s var(--ease);position:relative;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;overflow:hidden}.ach.locked{opacity:.35;filter:grayscale(.8)}.ach:not(.locked){background:linear-gradient(135deg,#b8945a2e,#d4b5840f);border-color:#b8945a66}.ach:not(.locked):before{content:"";position:absolute;top:-40%;left:-40%;width:60%;height:180%;background:linear-gradient(115deg,transparent 30%,rgba(245,239,226,.18) 50%,transparent 70%);transform:rotate(15deg);animation:shine 4.5s linear infinite}@keyframes shine{0%{transform:translate(-30%) rotate(15deg)}to{transform:translate(180%) rotate(15deg)}}.ach-emoji{display:grid;place-items:center;color:var(--oro-light)}.ach.locked .ach-emoji{color:#f5efe24d}.ach:not(.locked) .ach-emoji{color:var(--oro)}.ach-title{font-size:11px;font-weight:700;line-height:1.2}.prize{background:linear-gradient(135deg,#b8945a,#d4b584);color:var(--bosco);border-radius:22px;padding:18px;display:flex;align-items:center;gap:14px}.prize-emoji{display:grid;place-items:center;color:var(--bosco)}.prize-l{font-size:11px;text-transform:uppercase;letter-spacing:.1em;opacity:.75;font-weight:800}.prize-text{font-family:Fraunces,serif;font-size:20px;font-weight:700;line-height:1.2;margin-top:2px}.toast-stack{position:fixed;top:max(16px,env(safe-area-inset-top));left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:100;pointer-events:none;padding:0 16px}.toast{background:var(--bosco);color:var(--crema);padding:14px 18px;border-radius:18px;box-shadow:var(--shadow-lg);border:2px solid var(--oro);display:flex;align-items:center;gap:10px;max-width:360px;pointer-events:auto;animation:toastIn .3s var(--ease)}.toast-emoji{font-size:30px}.toast-icon{color:var(--oro);display:grid;place-items:center}.toast-body{flex:1}.toast-title{font-family:Fraunces,serif;font-size:16px;font-weight:700}.toast-sub{font-size:12px;color:#f5efe2b3}@keyframes toastIn{0%{transform:translateY(-30px);opacity:0}to{transform:translateY(0);opacity:1}}.ipt{width:100%;padding:12px 14px;border-radius:12px;background:#f5efe20f;border:1.5px solid var(--line);color:var(--crema);font-size:14px;font-weight:600;outline:none;transition:border-color .15s var(--ease)}.ipt:focus{border-color:var(--oro)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000a6;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:200;display:flex;align-items:flex-end;justify-content:center;padding:env(safe-area-inset-top) 12px env(safe-area-inset-bottom);animation:fadeIn .2s var(--ease)}@media (min-width: 600px){.modal-overlay{align-items:center}}.modal{width:100%;max-width:460px;background:var(--bosco-soft);border:2px solid var(--oro);border-radius:22px;padding:20px;box-shadow:var(--shadow-lg);animation:slideUp .25s var(--ease);max-height:90dvh;overflow-y:auto}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}.play-btn{background:linear-gradient(135deg,var(--oro) 0%,var(--oro-light) 100%);color:var(--bosco);border-radius:22px;padding:22px;display:flex;align-items:center;gap:16px;justify-content:center;text-align:left;box-shadow:0 12px 30px #b8945a4d;transition:transform .15s var(--ease)}.play-btn:active{transform:scale(.98)}.play-btn.small{padding:10px 14px;font-size:13px;font-weight:700;justify-content:center;gap:6px;box-shadow:none}.bottom-nav{position:sticky;bottom:max(8px,env(safe-area-inset-bottom));margin-top:auto;display:flex;gap:6px;padding:6px;background:#1f2c1eeb;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:22px;border:1.5px solid var(--line)}.nav-btn{flex:1;padding:12px 6px;border-radius:16px;font-size:11px;font-weight:700;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;transition:background .15s var(--ease)}.nav-btn.active{background:var(--oro);color:var(--bosco)}.nav-emoji{font-size:22px}