@import "https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap";
.pixel-container{image-rendering:pixelated;background:#1a1a2e;font-family:"Press Start 2P",monospace;position:fixed;inset:0;overflow:hidden}.pixel-scene{box-sizing:border-box;justify-content:center;align-items:center;width:100%;height:100%;padding:20px;display:flex}.pixel-title{color:gold;text-shadow:2px 2px #000;letter-spacing:2px;z-index:100;font-size:12px;position:fixed;top:20px;left:50%;transform:translate(-50%)}.pixel-box{background:#16213e;border:4px solid #0f3460;padding:16px;position:relative;box-shadow:inset -4px -4px #0a1628,inset 4px 4px #1a4a7a,8px 8px #0000004d}.pixel-box:before{content:"";pointer-events:none;border:4px solid #e94560;position:absolute;inset:-8px}.pixel-btn{color:#fff;cursor:pointer;text-transform:uppercase;background:#e94560;border:none;padding:12px 20px;font-family:"Press Start 2P",monospace;font-size:10px;transition:transform .1s;position:relative;box-shadow:4px 4px #a31545,inset -2px -2px #a31545,inset 2px 2px #ff6b8a}.pixel-btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px #a31545,inset -2px -2px #a31545,inset 2px 2px #ff6b8a}.pixel-btn:active{transform:translate(2px,2px);box-shadow:2px 2px #a31545,inset -2px -2px #a31545,inset 2px 2px #ff6b8a}.pixel-btn-secondary{background:#0f3460;box-shadow:4px 4px #0a1628,inset -2px -2px #0a1628,inset 2px 2px #1a4a7a}.pixel-btn-secondary:hover{box-shadow:6px 6px #0a1628,inset -2px -2px #0a1628,inset 2px 2px #1a4a7a}.pixel-text{color:#eee;font-family:"Press Start 2P",monospace;font-size:10px;line-height:1.8}.pixel-text-sm{font-size:8px}.pixel-text-lg{font-size:14px}.pixel-text-gold{color:gold;text-shadow:2px 2px #b8860b}.pixel-text-cyan{color:#00d9ff;text-shadow:2px 2px #08a}.pixel-text-pink{color:#e94560;text-shadow:2px 2px #a31545}.pixel-avatar{color:gold;background:#0f3460;border:4px solid #e94560;justify-content:center;align-items:center;width:64px;height:64px;font-size:24px;display:flex;box-shadow:4px 4px #000}.pixel-avatar-lg{width:96px;height:96px;font-size:36px}.pixel-card{cursor:pointer;background:#16213e;border:4px solid #0f3460;padding:12px;transition:transform .1s,box-shadow .1s;box-shadow:4px 4px #000}.pixel-card:hover{border-color:#e94560;transform:translate(-2px,-2px);box-shadow:6px 6px #000}.pixel-badge{color:#fff;background:#e94560;padding:4px 8px;font-size:8px;display:inline-block;box-shadow:2px 2px #a31545}.pixel-badge-blue{background:#0f3460;box-shadow:2px 2px #0a1628}.pixel-badge-green{background:#10b981;box-shadow:2px 2px #059669}.pixel-badge-gold{color:#1a1a2e;background:gold;box-shadow:2px 2px #b8860b}.pixel-progress{background:#0a1628;border:2px solid #0f3460;width:100%;height:16px;padding:2px}.pixel-progress-bar{background:linear-gradient(#10b981 0%,#059669 50%,#10b981 100%);height:100%;box-shadow:inset 0 -2px #059669}.pixel-grid{gap:12px;display:grid}.pixel-grid-2{grid-template-columns:repeat(2,1fr)}.pixel-grid-3{grid-template-columns:repeat(3,1fr)}.pixel-grid-4{grid-template-columns:repeat(4,1fr)}.pixel-icon{justify-content:center;align-items:center;width:32px;height:32px;font-size:16px;display:inline-flex}@keyframes pixel-blink{0%,to{opacity:1}50%{opacity:0}}@keyframes pixel-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes pixel-float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.pixel-blink{animation:1s step-end infinite pixel-blink}.pixel-bounce{animation:.5s ease-in-out infinite pixel-bounce}.pixel-float{animation:2s ease-in-out infinite pixel-float}.pixel-stars{pointer-events:none;position:absolute;inset:0;overflow:hidden}.pixel-star{background:#fff;width:4px;height:4px;animation:2s step-end infinite pixel-blink;position:absolute}.pixel-dialog-overlay{z-index:200;background:#00000080;justify-content:center;align-items:flex-end;padding:20px;display:flex;position:fixed;inset:0}.pixel-dialog{background:#16213e;border:4px solid #e94560;width:100%;max-width:600px;padding:20px;position:relative;box-shadow:8px 8px #00000080,inset -4px -4px #0a1628,inset 4px 4px #1a4a7a}.pixel-dialog-text{color:#fff;margin-bottom:16px;font-size:10px;line-height:2}.pixel-dialog-hint{color:#888;text-align:right;font-size:8px}.pixel-nav{z-index:100;gap:8px;display:flex;position:fixed;bottom:20px;left:20px}.pixel-map{aspect-ratio:16/10;background:#0a1628;border:4px solid #0f3460;width:100%;max-width:800px;margin:0 auto;position:relative;box-shadow:8px 8px #0000004d}.pixel-map-location{cursor:pointer;transition:transform .2s;position:absolute}.pixel-map-location:hover{transform:scale(1.1)}.pixel-map-icon{background:#16213e;border:4px solid #e94560;justify-content:center;align-items:center;width:48px;height:48px;font-size:20px;display:flex;box-shadow:4px 4px #000}.pixel-map-label{color:gold;white-space:nowrap;text-shadow:1px 1px #000;margin-top:8px;font-size:8px;position:absolute;top:100%;left:50%;transform:translate(-50%)}.pixel-scroll{max-height:60vh;padding-right:8px;overflow-y:auto}.pixel-scroll::-webkit-scrollbar{width:12px}.pixel-scroll::-webkit-scrollbar-track{background:#0a1628;border:2px solid #0f3460}.pixel-scroll::-webkit-scrollbar-thumb{background:#e94560;border:2px solid #a31545}@media (max-width:768px){.pixel-title{font-size:10px}.pixel-text{font-size:8px}.pixel-btn{padding:8px 12px;font-size:8px}.pixel-grid-3,.pixel-grid-4{grid-template-columns:repeat(2,1fr)}.pixel-map-icon{width:36px;height:36px;font-size:14px}.pixel-map-label{font-size:6px}}