body { background: #000; margin: 0; padding: 0; overflow: hidden; display: flex; justify-content: center; align-items: center; height: 100vh; color: white; font-family: serif; outline:none; }
#window-frame { width: 544px; height: 408px; background: #111; border: 2px solid #222; display: flex; position: relative; }
#game-view { width: 326px; height: 380px; margin: 14px 0 14px 14px; position: relative; background: #000; overflow: hidden; border: 1px solid #444; outline:none; }
canvas { display: block; width: 100%; height: 100%; }
#side-panel { width: 187px; height: 380px; margin: 14px 14px 14px 3px; background-color: #0a0000; border: 1px solid #322; position: relative; }
.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle at 30% 50%, #400 0%, #100 70%, #000 100%); }
.main-logo { font-size: 28px; text-shadow: 2px 2px 0 #800; }
.menu-btn, .diff-btn, .option-row { font-size: 15px; color: #555; margin: 4px; font-weight: bold; cursor: pointer; }
.selected { color: #fff !important; text-shadow: 0 0 8px #f00 !important; transform: scale(1.1); }
#dialogue-box { position: absolute; bottom: 10px; left: 8px; right: 8px; height: 80px; background: rgba(0,0,0,0.85); border: 1.5px solid #fff; padding: 8px; display: none; z-index: 130; }
#char-name { font-size: 12px; font-weight: bold; border-bottom: 1px solid #666; color:#f88; }
#char-text { font-size: 11px; margin-top: 4px; }
#boss-hp-ui { position: absolute; top: 10px; left: 10px; width: 300px; display: none; }
#boss-bar-bg { width: 100%; height: 3px; background: #200; border: 0.5px solid #fff; }
#boss-bar { width: 100%; height: 100%; background: #fff; box-shadow: 0 0 4px #f00; }
.ui-row { margin-bottom: 6px; padding: 2px 10px; border-bottom: 1px solid #211; }
.ui-label { font-size: 10px; color: #a88; display: block; }
.ui-value { font-size: 13px; text-align: right; display: block; }
.ui-img-row { text-align: right; color: #f77; height: 15px; }
#enemy-marker { position: absolute; bottom: 0; width: 10px; height: 3px; background: #f00; display: none; }
#fs-btn { background: #300; color: #888; font-size: 9px; cursor: pointer; border: 1px solid #444; }
.fog-layer { position: absolute; width: 200%; height: 100%; background: linear-gradient(90deg, transparent, rgba(139,0,0,0.1), transparent); animation: fogMove 15s linear infinite; }
@keyframes fogMove { from { transform: translateX(-50%); } to { transform: translateX(0%); } }