:root{--mint: #a8e6cf;--mint-dark: #7bc9a6;--cream: #fff5e6;--coral: #ff8b94;--coral-dark: #e67380;--gold: #ffd93d;--gold-dark: #e6c235;--lavender: #c3aed6;--sky: #87ceeb;--sky-dark: #5eb3d9;--pixel-border: #5a4a3a;--pixel-shadow: #3d3229;--bg-gradient-1: #e8f5e9;--bg-gradient-2: #fff8e1;--text-dark: #4a4a4a;--text-light: #7a7a7a;--success: #4ecdc4;--warning: #ffe66d;--danger: #ff6b6b;--white: #ffffff}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Nunito,sans-serif;background:linear-gradient(135deg,var(--bg-gradient-1) 0%,var(--bg-gradient-2) 50%,#fce4ec 100%);min-height:100vh;color:var(--text-dark);overflow-x:hidden}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 4 4' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='1' height='1' fill='%23000' opacity='0.02'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23000' opacity='0.02'/%3E%3C/svg%3E");background-size:4px 4px;pointer-events:none;z-index:1000}.pixel-font{font-family:"Press Start 2P",cursive}a{color:inherit;text-decoration:none}.container{max-width:1100px;margin:0 auto;padding:20px}.pixel-box{background:var(--cream);border:4px solid var(--pixel-border);box-shadow:6px 6px 0 var(--pixel-shadow)}.pixel-box-white{background:var(--white);border:4px solid var(--pixel-border);box-shadow:6px 6px 0 var(--pixel-shadow)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;font-family:"Press Start 2P",cursive;font-size:12px;border:4px solid var(--pixel-border);cursor:pointer;transition:all .2s ease;text-decoration:none}.btn-primary{background:linear-gradient(180deg,var(--coral) 0%,var(--coral-dark) 100%);color:#fff;box-shadow:4px 4px 0 var(--pixel-shadow);text-shadow:1px 1px 0 var(--pixel-shadow)}.btn-primary:hover{transform:translateY(2px);box-shadow:2px 2px 0 var(--pixel-shadow)}.btn-secondary{background:linear-gradient(180deg,var(--mint) 0%,var(--mint-dark) 100%);color:var(--pixel-border);box-shadow:4px 4px 0 var(--pixel-shadow)}.btn-secondary:hover{transform:translateY(2px);box-shadow:2px 2px 0 var(--pixel-shadow)}.btn-gold{background:linear-gradient(180deg,var(--gold) 0%,var(--gold-dark) 100%);color:var(--pixel-border);box-shadow:4px 4px 0 var(--pixel-shadow)}.btn-gold:hover{transform:translateY(2px);box-shadow:2px 2px 0 var(--pixel-shadow)}.btn-small{padding:8px 16px;font-size:10px}.btn-large{padding:16px 32px;font-size:14px}.form-group{margin-bottom:20px}.form-label{display:block;font-family:"Press Start 2P",cursive;font-size:10px;color:var(--pixel-border);margin-bottom:8px}.form-input{width:100%;padding:12px 16px;font-family:Nunito,sans-serif;font-size:16px;border:3px solid var(--pixel-border);background:var(--white);color:var(--text-dark);outline:none;transition:all .2s ease}.form-input:focus{box-shadow:0 0 0 3px var(--gold)}.form-input::placeholder{color:var(--text-light)}.form-select{width:100%;padding:12px 16px;font-family:Nunito,sans-serif;font-size:16px;border:3px solid var(--pixel-border);background:var(--white);color:var(--text-dark);outline:none;cursor:pointer}.form-select:focus{box-shadow:0 0 0 3px var(--gold)}.form-error{color:var(--danger);font-size:12px;margin-top:6px}.card{background:var(--cream);border:4px solid var(--pixel-border);box-shadow:6px 6px 0 var(--pixel-shadow);overflow:hidden}.card-header{padding:16px 20px;background:linear-gradient(180deg,rgba(255,255,255,.5) 0%,transparent 100%);border-bottom:3px solid var(--pixel-border);display:flex;align-items:center;gap:12px}.card-title{font-family:"Press Start 2P",cursive;font-size:12px;color:var(--pixel-border)}.card-body{padding:20px}.progress-bar{height:20px;background:#e8e8e8;border:3px solid var(--pixel-border);overflow:hidden;position:relative}.progress-fill{height:100%;position:relative;transition:width .5s cubic-bezier(.34,1.56,.64,1)}.progress-fill:after{content:"";position:absolute;top:0;left:0;right:0;height:50%;background:#ffffff4d}.progress-fill.coral{background:linear-gradient(90deg,var(--coral),var(--coral-dark))}.progress-fill.gold{background:linear-gradient(90deg,var(--gold),var(--gold-dark))}.progress-fill.mint{background:linear-gradient(90deg,var(--mint),var(--mint-dark))}.progress-fill.sky{background:linear-gradient(90deg,var(--sky),var(--sky-dark))}.progress-fill.lavender{background:linear-gradient(90deg,var(--lavender),#9b7bb8)}.progress-fill.rainbow{background:linear-gradient(90deg,var(--mint),var(--gold),var(--coral))}.progress-label{display:flex;justify-content:space-between;font-size:11px;color:var(--text-light);margin-top:4px}.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;font-family:"Press Start 2P",cursive;font-size:8px;border:2px solid var(--pixel-border);box-shadow:2px 2px 0 var(--pixel-shadow)}.badge-gold{background:var(--gold);color:var(--pixel-border)}.badge-coral{background:var(--coral);color:#fff}.badge-mint{background:var(--mint);color:var(--pixel-border)}.badge-lavender{background:var(--lavender);color:var(--pixel-border)}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}@media (max-width: 768px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}.section-title{font-family:"Press Start 2P",cursive;font-size:14px;color:var(--pixel-border);text-align:center;margin-bottom:24px}.section-title:before,.section-title:after{content:"◆";margin:0 12px;color:var(--coral)}.navbar{background:var(--cream);border-bottom:4px solid var(--pixel-border);padding:12px 20px;position:sticky;top:0;z-index:100}.navbar-container{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}.navbar-brand{font-family:"Press Start 2P",cursive;font-size:16px;color:var(--pixel-border);display:flex;align-items:center;gap:8px}.navbar-links{display:flex;align-items:center;gap:16px}.navbar-link{font-family:"Press Start 2P",cursive;font-size:10px;color:var(--text-light);padding:8px 12px;transition:color .2s}.navbar-link:hover,.navbar-link.active{color:var(--coral)}.avatar{width:48px;height:48px;background:var(--mint);border:3px solid var(--pixel-border);display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:2px 2px 0 var(--pixel-shadow)}.avatar-large{width:80px;height:80px;font-size:40px}.avatar-small{width:32px;height:32px;font-size:16px;border-width:2px}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px}.stat-item{text-align:center;padding:16px;background:#ffffff80;border:2px dashed var(--pixel-border)}.stat-value{font-family:"Press Start 2P",cursive;font-size:20px;color:var(--coral);margin-bottom:8px}.stat-label{font-size:12px;color:var(--text-light);text-transform:uppercase}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes sparkle{0%,to{opacity:1}50%{opacity:.5}}.animate-fadeIn{animation:fadeIn .3s ease}.animate-bounce{animation:bounce .5s ease infinite}.animate-pulse{animation:pulse 1.5s ease infinite}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:32px}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}.mb-4{margin-bottom:32px}.flex{display:flex}.flex-center{display:flex;align-items:center;justify-content:center}.flex-between{display:flex;align-items:center;justify-content:space-between}.gap-1{gap:8px}.gap-2{gap:16px}.gap-3{gap:24px}.quest-item{display:flex;align-items:flex-start;gap:12px;padding:16px;background:#fff9;border:2px solid var(--pixel-border);transition:all .2s ease;cursor:pointer;margin-bottom:12px}.quest-item:hover{transform:translate(5px);background:#ffffffe6}.quest-item.completed{background:#4ecdc433}.quest-checkbox{width:28px;height:28px;background:#fff;border:3px solid var(--pixel-border);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}.quest-item.completed .quest-checkbox{background:var(--success);color:#fff}.quest-content{flex:1}.quest-title{font-weight:800;font-size:14px;color:var(--pixel-border);margin-bottom:4px}.quest-desc{font-size:13px;color:var(--text-light);line-height:1.4}.quest-xp{font-family:"Press Start 2P",cursive;font-size:10px;color:var(--gold-dark);background:var(--gold);padding:6px 10px;border:2px solid var(--pixel-border);white-space:nowrap}.table-container{overflow-x:auto}.table{width:100%;border-collapse:collapse}.table th{font-family:"Press Start 2P",cursive;font-size:10px;text-align:left;padding:12px 16px;background:var(--pixel-border);color:var(--cream);white-space:nowrap}.table td{padding:12px 16px;border-bottom:2px solid var(--pixel-border);background:var(--cream)}.table tr:hover td{background:var(--white)}.table tr.current-user td{background:#ffd73d4d}.tabs{display:flex;gap:0;margin-bottom:20px}.tab{flex:1;padding:14px 20px;font-family:"Press Start 2P",cursive;font-size:10px;text-align:center;background:var(--cream);border:3px solid var(--pixel-border);cursor:pointer;transition:all .2s}.tab:not(:last-child){border-right:none}.tab:hover{background:var(--white)}.tab.active{background:var(--gold);color:var(--pixel-border)}.xp-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--gold);border:4px solid var(--pixel-border);padding:30px 50px;font-family:"Press Start 2P",cursive;font-size:24px;z-index:1000;animation:xpPopup 1.5s ease forwards;box-shadow:8px 8px 0 var(--pixel-shadow)}@keyframes xpPopup{0%{transform:translate(-50%,-50%) scale(0);opacity:0}20%{transform:translate(-50%,-50%) scale(1.2);opacity:1}40%{transform:translate(-50%,-50%) scale(1)}80%{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(-50%,-50%) scale(.8);opacity:0}}