@import"https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Nunito:wght@400;600;700;800&display=swap";:root{--bg-sky: #c8e6f5;--bg-ground: #d4e8b0;--panel-bg: #fef9ee;--panel-border: #e8d5a3;--panel-shadow: rgba(180, 140, 80, .15);--gold: #f0c040;--gold-dark: #c89820;--green-hp: #6dbf67;--blue-mp: #72b0e8;--orange-xp: #f0945a;--text-dark: #3d2b1f;--text-mid: #6b4c35;--text-light: #a08060;--bar-bg: #e8dcc8;--font-pixel: "Press Start 2P", monospace;--font-main: "Nunito", sans-serif}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-main);background:var(--bg-sky);color:var(--text-dark);min-height:100vh;overflow-x:hidden}#root{min-height:100vh;display:flex;justify-content:center}.app-container{width:100%;max-width:480px;min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(180deg,#c8e6f5,#d4e8b0);position:relative}.panel{background:var(--panel-bg);border:2px solid var(--panel-border);border-radius:12px;box-shadow:0 4px 12px var(--panel-shadow),inset 0 1px #fffc;padding:12px 14px;margin:0 12px 10px}.btn-primary{background:linear-gradient(180deg,#7ec87e,#5aaa5a);border:2px solid #4a9a4a;border-bottom-width:4px;color:#fff;font-family:var(--font-main);font-weight:800;font-size:14px;border-radius:10px;padding:12px 20px;cursor:pointer;transition:all .1s;width:100%}.btn-primary:active{transform:translateY(2px);border-bottom-width:2px}.btn-gold{background:linear-gradient(180deg,#f8d060,#e8a820);border:2px solid #c88010;border-bottom-width:4px;color:var(--text-dark);font-family:var(--font-main);font-weight:800;font-size:14px;border-radius:10px;padding:12px 20px;cursor:pointer;transition:all .1s;width:100%}.btn-gold:active{transform:translateY(2px);border-bottom-width:2px}.login-bg{width:100%;max-width:480px;min-height:100vh;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px}.login-sky{position:absolute;inset:0;background:linear-gradient(180deg,#b8daf2,#d4edb0 70%,#c0d890);z-index:0}.login-ground{position:absolute;bottom:0;left:0;right:0;height:40%;background:linear-gradient(180deg,transparent,rgba(160,200,100,.3));z-index:0}.login-clouds{position:absolute;inset:0;z-index:1;pointer-events:none}.cloud{position:absolute;background:#ffffffb3;border-radius:50px}.cloud:before,.cloud:after{content:"";position:absolute;background:#ffffffb3;border-radius:50%}.cloud-1{width:80px;height:25px;top:8%;left:10%;animation:float 8s ease-in-out infinite}.cloud-1:before{width:35px;height:35px;top:-15px;left:10px}.cloud-1:after{width:25px;height:25px;top:-10px;left:35px}.cloud-2{width:60px;height:20px;top:15%;right:15%;animation:float 11s ease-in-out infinite reverse}.cloud-2:before{width:28px;height:28px;top:-12px;left:8px}.cloud-3{width:50px;height:18px;top:5%;left:55%;animation:float 9s ease-in-out infinite}.cloud-3:before{width:22px;height:22px;top:-10px;left:6px}@keyframes float{0%,to{transform:translate(0)}50%{transform:translate(12px)}}.login-container{position:relative;z-index:2;width:100%;max-width:360px;display:flex;flex-direction:column;align-items:center;gap:14px}.login-logo{display:flex;flex-direction:column;align-items:center;gap:2px}.logo-icon{font-size:48px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.15))}.logo-title{font-family:var(--font-pixel);font-size:22px;color:var(--text-dark);text-shadow:2px 2px 0 rgba(255,255,255,.5);letter-spacing:2px}.logo-sub{font-family:var(--font-pixel);font-size:10px;color:var(--text-mid);letter-spacing:6px}.login-tagline{font-size:13px;color:var(--text-mid);font-weight:700;letter-spacing:.5px;text-align:center}.login-card{background:var(--panel-bg);border:2px solid var(--panel-border);border-radius:16px;box-shadow:0 8px 24px var(--panel-shadow),inset 0 1px #ffffffe6;padding:20px;width:100%;display:flex;flex-direction:column;gap:14px}.login-card-title{font-weight:800;font-size:15px;color:var(--text-mid);text-align:center}.input-group{display:flex;flex-direction:column;gap:5px}.input-group label{font-size:12px;font-weight:800;color:var(--text-mid);text-transform:uppercase;letter-spacing:.5px}.login-input{background:#fff;border:2px solid var(--panel-border);border-radius:8px;padding:10px 12px;font-family:var(--font-main);font-size:15px;font-weight:700;color:var(--text-dark);outline:none;transition:border-color .2s}.login-input:focus{border-color:var(--blue-mp)}.login-input::placeholder{color:var(--text-light);font-weight:400}.input-hint{font-size:11px;color:var(--text-light)}.login-error{background:#fff0f0;border:1px solid #f0b0b0;border-radius:8px;padding:8px 12px;font-size:12px;font-weight:700;color:#c04040}.login-btn{margin-top:4px;font-size:13px}.login-footer{font-size:12px;color:var(--text-mid);text-align:center;font-weight:600}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:480px;height:68px;background:var(--panel-bg);border-top:2px solid var(--panel-border);display:flex;align-items:center;justify-content:space-around;z-index:100;box-shadow:0 -4px 16px #b48c5026}.nav-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;background:none;border:none;cursor:pointer;border-radius:10px;margin:4px;transition:all .15s}.nav-tab.active{background:linear-gradient(180deg,#f0f8e8,#e0f0d0);border:1.5px solid #b8d890}.nav-icon{font-size:22px;line-height:1}.nav-label{font-family:var(--font-main);font-size:10px;font-weight:800;color:var(--text-mid)}.nav-tab.active .nav-label{color:var(--green-dark)}.home-header{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:12px 14px 10px;background:#fef9eeeb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:2px solid var(--panel-border);border-radius:12px;box-shadow:0 4px 12px #b48c5026;margin:10px 12px 0}.header-left{display:flex;flex-direction:column;gap:4px;flex:1}.header-name-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.header-name{font-weight:800;font-size:17px;color:var(--text-dark)}.header-class{font-weight:700;font-size:13px}.header-level{font-size:12px;font-weight:700;color:var(--text-light)}.xp-bar-wrap{display:flex;flex-direction:column;gap:3px;max-width:200px}.xp-label{font-size:10px;color:var(--text-light);font-weight:700}.header-badges{display:flex;flex-direction:column;gap:6px;align-items:flex-end;flex-shrink:0;margin-left:10px}.badge{display:flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:800;white-space:nowrap}.badge-streak{background:linear-gradient(135deg,#fff0e0,#ffe0c0);border:1.5px solid #f0a060;color:#c06020}.badge-coins{background:linear-gradient(135deg,#fffae0,#fff0b0);border:1.5px solid #e0c030;color:#806010}.token-icon{width:16px;height:16px;object-fit:contain}.panel{background:var(--panel-bg);border:2px solid var(--panel-border);border-radius:12px;box-shadow:0 4px 12px var(--panel-shadow),inset 0 1px #fffc;padding:12px 14px;margin:10px 12px}.panel-title{font-weight:800;font-size:13px;color:var(--text-mid);margin-bottom:10px;display:flex;align-items:center;gap:6px}.calories-row{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:12px;background:#ffffff80;border-radius:8px;padding:8px;text-align:center}.cal-label{font-size:10px;font-weight:700;color:var(--text-light);text-transform:uppercase}.cal-value{font-size:13px;font-weight:800;color:var(--text-dark)}.cal-value.consumed{color:var(--orange-xp)}.cal-value.remain{color:var(--green-hp)}.macros-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.macro-item{display:flex;flex-direction:column;gap:4px}.macro-header{display:flex;justify-content:space-between;align-items:center}.macro-label{font-size:11px;font-weight:800;color:var(--text-mid)}.macro-pct{font-size:11px;font-weight:800}.macro-values{font-size:10px;color:var(--text-light);font-weight:600}.progress-bar{height:12px;background:var(--bar-bg);border-radius:20px;overflow:hidden;border:1px solid var(--panel-border)}.progress-fill{height:100%;border-radius:20px;transition:width .8s ease}.avatar-scene{position:relative;width:calc(100% - 24px);margin:0 12px 10px;border-radius:12px;border:2px solid var(--panel-border);overflow:hidden;background-size:cover;background-position:center center;display:flex;align-items:flex-end;padding-bottom:16px;min-height:220px;max-height:260px;box-shadow:0 4px 12px var(--panel-shadow)}.avatar-scene-inner{display:flex;align-items:flex-end;justify-content:center;gap:20px;width:100%;padding:0 24px}.avatar-col{display:flex;align-items:flex-end;justify-content:center}.avatar-main-img{height:180px;width:auto;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 8px 16px rgba(0,0,0,.25))}.pet-col{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:20px}.pet-sprite-scene{font-size:56px;animation:petBob 1.5s ease-in-out infinite;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2))}@keyframes petBob{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.pet-label{background:#fef9eed9;border:1.5px solid var(--panel-border);border-radius:10px;padding:3px 8px;font-size:11px;font-weight:800;color:var(--text-mid)}.pet-rate-label{font-size:11px;font-weight:800;color:var(--gold-dark)}.pet-empty-scene{background:#fef9eeb3;border:1.5px solid var(--panel-border);border-radius:10px;padding:8px 12px;font-size:11px;font-weight:700;color:var(--text-light)}.avatar-wrapper{position:relative;width:100%;height:100%}.avatar-layer{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}.avatar-layer-hair,.avatar-layer-dress{top:-1%}.avatar-aura{mix-blend-mode:screen}