*{margin:0;padding:0;box-sizing:border-box}:root{--bg-dark: #0a0a0a;--bg-panel: #1a1a2e;--bg-darker: #0d0d1a;--border-gold: #c0a040;--border-dark: #2a2a4a;--text-light: #c8c8c8;--text-gold: #e0c060;--text-red: #c04040;--text-green: #40c040;--accent: #806020;--hp-green: #40a040;--hp-yellow: #c0c040;--hp-red: #c04040;--mp-blue: #4060c0;--font-mono: "Courier New", monospace}body{background:var(--bg-dark);color:var(--text-light);font-family:var(--font-mono);font-size:14px;overflow:hidden;-webkit-user-select:none;user-select:none;display:flex;justify-content:center;align-items:center;min-height:100vh}#game-container{width:800px;max-width:100vw;background:var(--bg-dark);border:2px solid var(--border-gold);display:flex;flex-direction:column}.hidden{display:none!important}#start-screen,#char-create{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--bg-dark);display:flex;justify-content:center;align-items:center;z-index:100}#char-create{display:flex}#char-create.hidden{display:none}.start-content,.char-create-content{text-align:center;padding:40px}.start-content h1,.char-create-content h1{color:var(--text-gold);font-size:32px;margin-bottom:10px;text-shadow:0 0 20px rgba(192,160,64,.5)}.subtitle{color:var(--text-light);font-style:italic;margin-bottom:30px}.menu{display:flex;flex-direction:column;gap:10px;align-items:center}.menu button,.char-create-content button{background:var(--bg-panel);color:var(--text-gold);border:1px solid var(--border-gold);padding:12px 40px;font-family:var(--font-mono);font-size:16px;cursor:pointer;min-width:250px}.menu button:hover:not(:disabled),.char-create-content button:hover:not(:disabled){background:var(--accent);color:#fff}.menu button:disabled,.char-create-content button:disabled{opacity:.4;cursor:not-allowed}#top-bar{display:flex;justify-content:space-between;align-items:center;padding:4px 12px;background:var(--bg-panel);border-bottom:1px solid var(--border-gold);font-size:13px}#game-title{color:var(--text-gold);font-weight:700}#game-status{display:flex;gap:15px;color:var(--text-light)}#main-layout{display:flex;height:500px}#left-panel{flex:1;display:flex;flex-direction:column;padding:4px;gap:4px}#viewport-container{position:relative;background:#000;border:1px solid var(--border-dark);display:flex;justify-content:center;align-items:center;flex:1}#viewport{image-rendering:pixelated;image-rendering:crisp-edges;max-width:100%}#viewport-overlay{position:absolute;top:4px;right:4px}#compass{width:40px;height:40px;border:1px solid var(--border-gold);border-radius:50%;display:flex;justify-content:center;align-items:center;background:#000000b3;color:var(--text-gold);font-weight:700;font-size:14px}#message-log{height:80px;background:var(--bg-darker);border:1px solid var(--border-dark);padding:4px;overflow-y:auto;font-size:12px;scrollbar-width:thin;scrollbar-color:var(--accent) var(--bg-darker)}#message-log::-webkit-scrollbar{width:6px}#message-log::-webkit-scrollbar-thumb{background:var(--accent)}#messages div{padding:1px 2px;color:var(--text-light)}#messages div.combat{color:var(--text-red)}#messages div.loot{color:var(--text-gold)}#messages div.system{color:#6080a0}#messages div.important{color:var(--text-gold);font-weight:700}#action-bar{display:flex;gap:2px;padding:4px 0}.action-btn{flex:1;background:var(--bg-panel);border:1px solid var(--border-dark);color:var(--text-light);padding:6px 4px;cursor:pointer;font-size:18px;font-family:var(--font-mono);transition:all .15s}.action-btn:hover{background:var(--accent)}.action-btn:active{background:#504020}#right-panel{width:280px;background:var(--bg-panel);border-left:1px solid var(--border-gold);padding:4px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--accent) var(--bg-panel)}#right-panel::-webkit-scrollbar{width:6px}#right-panel::-webkit-scrollbar-thumb{background:var(--accent)}.char-card{background:var(--bg-darker);border:1px solid var(--border-dark);padding:6px;margin-bottom:4px;font-size:12px}.char-card .char-name{color:var(--text-gold);font-weight:700;font-size:13px;display:flex;justify-content:space-between;align-items:center}.char-card .char-class{color:var(--text-light);font-size:11px}.char-card .char-hp{display:flex;justify-content:space-between;margin-top:4px;font-size:11px}.char-card .char-mp{display:flex;justify-content:space-between;font-size:11px}.char-card .bar{width:100%;height:8px;background:#200;margin-top:2px;border:1px solid #333}.char-card .bar-fill{height:100%;transition:width .3s}.char-card .hp-fill{background:var(--hp-green)}.char-card .mp-fill{background:var(--mp-blue)}.char-card .char-equip{margin-top:4px;display:flex;gap:4px;font-size:10px}.char-card .equip-slot{border:1px solid var(--border-dark);padding:2px 4px;cursor:pointer;flex:1;text-align:center}.char-card .equip-slot:hover{background:var(--accent)}.char-card .char-portrait{width:100%;height:50px;background:var(--bg-dark);border:1px solid var(--border-dark);margin-bottom:4px;display:flex;justify-content:center;align-items:center;font-size:28px}.char-card.dead{opacity:.5;filter:grayscale(1)}.char-card.selected{border-color:var(--border-gold);box-shadow:0 0 8px #c0a0404d}.modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;display:flex;justify-content:center;align-items:center;z-index:200}.modal.hidden{display:none}.modal-content{background:var(--bg-panel);border:2px solid var(--border-gold);padding:20px;min-width:400px;max-height:80vh;overflow-y:auto}.modal-content h2{color:var(--text-gold);margin-bottom:12px}.modal-close{margin-top:12px;background:var(--bg-darker);color:var(--text-gold);border:1px solid var(--border-gold);padding:6px 20px;cursor:pointer;font-family:var(--font-mono)}#spell-list{display:flex;flex-direction:column;gap:4px}.spell-item{background:var(--bg-darker);border:1px solid var(--border-dark);padding:8px;cursor:pointer;display:flex;justify-content:space-between}.spell-item:hover{background:var(--accent)}.spell-item .spell-name{color:var(--text-gold)}.spell-item .spell-cost{color:var(--mp-blue)}.spell-item .spell-desc{color:var(--text-light);font-size:11px}#char-slots{display:flex;flex-direction:column;gap:10px;margin:20px 0}.char-slot{background:var(--bg-panel);border:1px solid var(--border-dark);padding:12px;text-align:left;display:flex;gap:12px;align-items:center}.char-slot .slot-icon{font-size:32px}.char-slot .slot-info{flex:1}.char-slot .slot-name{color:var(--text-gold);font-weight:700}.char-slot .slot-desc{color:var(--text-light);font-size:12px}.char-slot select,.char-slot input{background:var(--bg-darker);color:var(--text-gold);border:1px solid var(--border-dark);padding:4px;font-family:var(--font-mono);font-size:12px}.char-slot select option{background:var(--bg-darker)}@media (max-width: 800px){#game-container{width:100vw;border:none}#main-layout{flex-direction:column;height:auto}#right-panel{width:100%;border-left:none;border-top:1px solid var(--border-gold)}#left-panel{flex:none}#viewport{width:100%;max-width:100%}.char-card .char-portrait{height:40px;font-size:22px}}