body, html { margin: 0; padding: 0; background: #000; overflow: hidden; font-family: 'serif'; color: #fff; }
#wrapper { display: flex; align-items: center; justify-content: center; height: 100vh; }
#game-container { display: flex; border: 4px solid #445; background: #000; position: relative; }
#game-box { width: 450px; height: 480px; position: relative; overflow: hidden; }
canvas { position: absolute; top: 0; left: 0; z-index: 10; width: 450px; height: 480px; }

/* メニュー */
#title-screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 100; }
.menu-container-scarlet { position: absolute; right: 30px; bottom: 50px; text-align: right; z-index: 110; width: 380px; }
.menu-item, .option-row { font-size: 24px; color: #555; margin: 12px 0; cursor: pointer; font-weight: bold; }
.menu-item.selected, .option-row.selected { color: #fff; text-shadow: 0 0 10px #f00; transform: scale(1.1); }
.menu-desc { font-size: 14px; color: #ccf; margin-top: 15px; height: 45px; text-shadow: 1px 1px 1px #000; }

/* サイドパネル */
#side-panel { width: 180px; padding: 20px; background: #001; border-left: 2px solid #334; box-sizing: border-box; }
.side-item { font-size: 14px; color: #ccf; margin-bottom: 25px; }
.side-item span { font-size: 22px; display: block; text-align: right; color: #fff; font-family: monospace; }

/* 会話 & ボスHP */
#dialogue-box { position: absolute; bottom: 20px; left: 20px; width: 380px; min-height: 80px; background: rgba(0,0,0,0.85); border: 2px solid #fff; z-index: 200; padding: 15px; display: none; }
#boss-hp-container { position: absolute; top: 15px; left: 15px; width: 420px; display: none; z-index: 50; }
#boss-hp-bar-bg { width: 100%; height: 6px; background: rgba(0,0,0,0.6); border: 1px solid #888; }
#boss-hp-bar { height: 100%; background: #f22; width: 100%; transition: width 0.2s; }