:root{--font-pixel: "Press Start 2P", monospace;--font-body: "VT323", monospace;--color-bg-top: #0a0a1e;--color-bg-bottom: #16163a;--color-panel-top: #2c4ade;--color-panel-bottom: #14267e;--color-panel-border: #f0f0f0;--color-panel-shadow: #101040;--color-text: #f0f0f0;--color-text-dim: #a8b4e8;--color-gold: #f8d048;--color-cyan: #48d8f8;--color-hp-green: #48c848;--color-mp-blue: #4888f8;--color-danger: #e05050}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100vh}body{background:linear-gradient(180deg,var(--color-bg-top),var(--color-bg-bottom));background-attachment:fixed;color:var(--color-text);font-family:var(--font-body);font-size:20px;line-height:1.4;image-rendering:pixelated}body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0px,rgba(0,0,0,.12) 1px,transparent 1px,transparent 3px);z-index:9999}h1,h2,h3{font-family:var(--font-pixel);color:var(--color-text);text-shadow:2px 2px 0 #000;margin:0 0 12px}h1{font-size:20px}h2{font-size:14px}h3{font-size:11px}p{margin:0 0 10px}a{color:var(--color-cyan)}.ff-panel{background:linear-gradient(180deg,var(--color-panel-top),var(--color-panel-bottom));border:3px solid var(--color-panel-border);border-radius:8px;box-shadow:inset 0 0 0 3px var(--color-panel-shadow),4px 4px #00000080;padding:18px}.ff-panel-title{font-family:var(--font-pixel);font-size:11px;color:var(--color-gold);text-shadow:2px 2px 0 #000;letter-spacing:1px;margin:-4px 0 12px;text-transform:uppercase}.pixel-btn{font-family:var(--font-pixel);font-size:10px;color:var(--color-text);text-shadow:1px 1px 0 #000;background:linear-gradient(180deg,#4060e8,#1c3098);border:2px solid var(--color-panel-border);border-radius:6px;box-shadow:inset 0 0 0 2px var(--color-panel-shadow);padding:10px 16px;cursor:pointer;text-transform:uppercase;transition:transform 60ms}.pixel-btn:hover:not(:disabled){background:linear-gradient(180deg,#5878ff,#2840b8)}.pixel-btn:hover:not(:disabled):before{content:"▶";color:var(--color-gold)}.pixel-btn:active:not(:disabled){transform:translate(2px,2px);box-shadow:none}.pixel-btn:disabled{opacity:.5;cursor:not-allowed}.pixel-btn--gold{background:linear-gradient(180deg,#d8a828,#986808)}.pixel-btn--gold:hover:not(:disabled){background:linear-gradient(180deg,#f8c838,#b88818)}.pixel-btn--danger{background:linear-gradient(180deg,#c04040,#802020)}.pixel-btn--danger:hover:not(:disabled){background:linear-gradient(180deg,#e05050,#a03030)}input,select,textarea{font-family:var(--font-body);font-size:20px;color:var(--color-text);background:#0c1450;border:2px solid var(--color-panel-border);border-radius:4px;box-shadow:inset 0 0 0 2px var(--color-panel-shadow);padding:6px 10px;width:100%}input:focus,select:focus,textarea:focus{outline:2px solid var(--color-gold)}label{display:block;font-family:var(--font-pixel);font-size:9px;color:var(--color-text-dim);text-transform:uppercase;margin-bottom:6px}.stat-bar{position:relative;height:18px;background:#0c1450;border:2px solid var(--color-panel-border);border-radius:4px;overflow:hidden}.stat-bar-fill{height:100%;transition:width .4s steps(8);background:linear-gradient(180deg,#70e870 30%,var(--color-hp-green) 30%)}.stat-bar-fill--mp{background:linear-gradient(180deg,#78a8ff 30%,var(--color-mp-blue) 30%)}.stat-bar-fill--gold{background:linear-gradient(180deg,#ffe078 30%,var(--color-gold) 30%)}.blink{animation:blink 1s steps(2,start) infinite}@keyframes blink{to{visibility:hidden}}.cursor-arrow{color:var(--color-gold);margin-right:6px}.text-gold{color:var(--color-gold)}.text-cyan{color:var(--color-cyan)}.text-dim{color:var(--color-text-dim)}