*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--navy:#1B1B3A;--silver:#E8E8E8;--indigo:#4A4A78;--lav:#8B8BB0;--gold:#FFD700;--red:#FF6B6B;--green:#6BCB77;--blue:#4A90D9;--text:#C8C8E0}
body{background:var(--navy);background-image:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.08) 2px,rgba(0,0,0,0.08) 4px);color:var(--text);font-family:'VT323',monospace;font-size:18px;line-height:1.6;-webkit-font-smoothing:none;overflow-x:hidden}
.pixel-star{position:fixed;width:4px;height:4px;pointer-events:none;z-index:0}
.pixel-star::before{content:'';position:absolute;width:4px;height:4px;background:var(--gold);opacity:0.4;box-shadow:0 -4px 0 var(--gold),-4px 0 0 var(--gold),4px 0 0 var(--gold),0 4px 0 var(--gold);animation:twinkle 3s ease-in-out infinite alternate}
@keyframes twinkle{0%{opacity:0.2}100%{opacity:0.6}}
.dashboard{max-width:700px;margin:0 auto;padding:32px 16px}
.panel{border:4px solid var(--silver);box-shadow:inset 4px 4px 0 var(--lav),inset -4px -4px 0 var(--indigo);background:rgba(27,27,58,0.9);position:relative}
.title-bar{background:var(--indigo);padding:2px 8px;font-family:'Silkscreen',monospace;font-size:14px;color:var(--silver);letter-spacing:0.04em}
.hero-panel{margin-bottom:16px}
.hero-inner{padding:24px;display:flex;gap:24px;align-items:center}
.pixel-avatar{width:64px;height:64px;flex-shrink:0;background:var(--indigo);image-rendering:pixelated;position:relative}
.pixel-avatar::after{content:'';position:absolute;top:0;left:0;width:1px;height:1px;background:transparent;box-shadow:24px 8px 0 var(--text),32px 8px 0 var(--text),40px 8px 0 var(--text),20px 16px 0 var(--text),24px 16px 0 var(--lav),28px 16px 0 var(--lav),32px 16px 0 var(--lav),36px 16px 0 var(--lav),40px 16px 0 var(--lav),44px 16px 0 var(--text),16px 24px 0 var(--lav),20px 24px 0 var(--lav),24px 24px 0 #fff,28px 24px 0 var(--lav),32px 24px 0 var(--lav),36px 24px 0 var(--lav),40px 24px 0 #fff,44px 24px 0 var(--lav),48px 24px 0 var(--lav),16px 32px 0 var(--lav),20px 32px 0 var(--lav),24px 32px 0 var(--lav),28px 32px 0 var(--lav),32px 32px 0 var(--red),36px 32px 0 var(--lav),40px 32px 0 var(--lav),44px 32px 0 var(--lav),48px 32px 0 var(--lav),20px 40px 0 var(--lav),24px 40px 0 var(--lav),28px 40px 0 var(--lav),32px 40px 0 var(--lav),36px 40px 0 var(--lav),40px 40px 0 var(--lav),44px 40px 0 var(--lav),24px 48px 0 var(--blue),28px 48px 0 var(--blue),32px 48px 0 var(--blue),36px 48px 0 var(--blue),40px 48px 0 var(--blue);transform:scale(1)}
h1{font-family:'Silkscreen',monospace;font-weight:400;font-size:32px;color:var(--silver);line-height:1.2}
.class-label{font-family:'Silkscreen',monospace;font-size:14px;color:var(--gold);margin-top:4px}
.tagline{color:var(--text);margin-top:4px}
.grid-panels{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.panel-body{padding:16px}
.stat-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.stat-label{font-family:'Silkscreen',monospace;font-size:14px;color:var(--gold);width:30px}
.bar-container{flex:1;height:12px;border:2px solid var(--silver);background:var(--navy)}
.bar{height:100%}
.bar-hp{background:var(--red)}
.bar-mp{background:var(--blue)}
.bar-exp{background:var(--green)}
.stat-val{font-size:14px;color:var(--text);width:80px;text-align:right}
.menu-list{list-style:none;padding:0}
.menu-list li{padding:4px 0 4px 20px;position:relative;cursor:default}
.menu-list li:hover::before{content:'';position:absolute;left:4px;top:50%;transform:translateY(-50%);width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid var(--gold)}
.menu-list li.active{color:var(--gold)}
.item{margin-bottom:4px}
.item-icon{color:var(--silver)}
.item-icon.gold{color:var(--gold)}
.item-icon.green{color:var(--green)}
.card-reveal{opacity:0;transform:scale(0.9);transition:opacity 0.15s,transform 0.15s}
.card-reveal.in-view{opacity:1;transform:scale(1)}
.status-bar{max-width:700px;margin:16px auto 32px;padding:8px 16px;display:flex;justify-content:space-between;align-items:center}
.status-name{font-family:'Silkscreen',monospace;font-size:14px;color:var(--silver)}
.status-right{font-family:'VT323',monospace;color:var(--text)}
.blink-cursor{display:inline-block;width:12px;height:18px;background:var(--silver);vertical-align:middle;animation:blink 600ms step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
@media(max-width:600px){.grid-panels{grid-template-columns:1fr}.hero-inner{flex-direction:column;text-align:center}h1{font-size:24px}}