* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Segoe UI',system-ui,sans-serif; background:#0a0a12; color:#c8c8c8; height:100vh; overflow:hidden; }
.screen { width:100%; height:100vh; display:flex; justify-content:center; align-items:center; }
#login-screen { background:linear-gradient(135deg,#0a0a1a,#1a0a2a); }
.login-box { background:rgba(20,20,35,0.9); border:1px solid #4a3a5a; border-radius:16px; padding:30px 24px; width:380px; max-width:92%; }
.login-box h1 { text-align:center; font-size:28px; color:#e8d5a8; margin-bottom:4px; }
.login-box .subtitle { text-align:center; color:#887a6a; font-size:14px; margin-bottom:20px; }
.login-tabs { display:flex; border-radius:8px; overflow:hidden; border:1px solid #2a2a3a; margin-bottom:16px; }
.login-tabs .tab-btn { flex:1; padding:10px; background:#1a1a2a; border:none; color:#888; cursor:pointer; font-size:14px; }
.login-tabs .tab-btn.active { background:#3a2a4a; color:#e8d5a8; }
.panel { display:none; flex-direction:column; gap:12px; }
.panel.active { display:flex; }
.panel input,.panel select { padding:12px 14px; background:#12121f; border:1px solid #2a2a3f; border-radius:8px; color:#c8c8c8; font-size:14px; outline:none; }
.panel button { padding:14px; background:linear-gradient(135deg,#5a3a7a,#3a2a5a); border:none; border-radius:8px; color:#fff; font-size:16px; font-weight:bold; cursor:pointer; }
.error-msg { color:#ff6a6a; font-size:13px; min-height:20px; }
#game-screen { background:#0a0a12; padding:0; align-items:stretch; }
#game-container { display:flex; flex-direction:column; width:100%; height:100vh; max-width:960px; margin:0 auto; background:#0d0d16; border-left:1px solid #1a1a2a; border-right:1px solid #1a1a2a; }
#top-bar { background:#14141f; padding:6px 12px; border-bottom:1px solid #1f1f30; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:4px; min-height:44px; }
.player-info { display:flex; gap:8px; flex-wrap:wrap; font-size:13px; }
.player-info span { background:#1a1a2a; padding:2px 10px; border-radius:4px; }
#p-name { color:#e8d5a8; font-weight:bold; }
#p-level { color:#7aface; }
#p-race { color:#c8a86a; }
#p-class { color:#8aaa6a; }
.stats-bar { display:flex; gap:6px 14px; flex-wrap:wrap; font-size:12px; color:#aaa; }
#p-hp,#p-maxhp { color:#ff6a6a; }
#p-mp,#p-maxmp { color:#6aafff; }
#p-attack { color:#ffaa6a; }
#p-defense { color:#6ac8ff; }
#p-gold { color:#ffd700; }
#main-content { flex:1; display:flex; flex-direction:row; overflow:hidden; }
#output-area { flex:3; overflow-y:auto; padding:10px 14px; background:#0a0a12; font-size:14px; line-height:1.6; scroll-behavior:smooth; }
#output-content { white-space:pre-wrap; word-wrap:break-word; }
.msg-system { color:#6a8aaa; }
.msg-combat { color:#ff6a4a; }
.msg-loot { color:#ffd700; }
.msg-info { color:#7aface; }
.msg-error { color:#ff4a4a; }
.msg-success { color:#6aff6a; }
#side-panel { flex:1; min-width:180px; max-width:280px; background:#0f0f1a; border-left:1px solid #1a1a2a; padding:10px 12px; display:flex; flex-direction:column; gap:10px; overflow-y:auto; }
#mini-map h4 { font-size:13px; color:#888; margin-bottom:4px; }
#map-rooms { display:flex; flex-wrap:wrap; gap:4px; }
#map-rooms button { background:#1a1a2a; border:1px solid #2a2a3a; border-radius:4px; color:#aaa; padding:4px 8px; font-size:11px; cursor:pointer; }
#map-rooms button.active { background:#3a2a5a; border-color:#6a4a8a; color:#fff; }
#quick-actions { display:flex; flex-wrap:wrap; gap:6px; }
#quick-actions button { background:#1a1a2a; border:1px solid #2a2a3a; border-radius:6px; color:#c8c8c8; padding:6px 10px; font-size:13px; flex:1; min-width:60px; cursor:pointer; }
#action-bar { background:#0f0f1a; border-top:1px solid #1a1a2a; padding:6px 10px; display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.dir-buttons { display:flex; flex-direction:column; align-items:center; gap:2px; }
.dir-buttons > div { display:flex; gap:4px; }
.dir-buttons button { width:44px; height:44px; background:#181825; border:1px solid #2a2a3a; border-radius:8px; color:#aaa; font-size:20px; cursor:pointer; }
.action-buttons { display:flex; gap:4px; flex-wrap:wrap; }
.action-buttons button { padding:8px 14px; background:#1a1a2a; border:1px solid #2a2a3a; border-radius:6px; color:#c8c8c8; font-size:13px; cursor:pointer; }
.action-buttons button:hover { background:#2a2a4a; }
.command-input { display:flex; gap:4px; flex:1; min-width:160px; }
#cmd-input { flex:1; padding:8px 10px; background:#181825; border:1px solid #2a2a3f; border-radius:6px; color:#c8c8c8; font-size:13px; outline:none; }
#cmd-send { padding:8px 14px; background:#3a2a5a; border:none; border-radius:6px; color:#fff; cursor:pointer; }
#modal-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); display:flex; justify-content:center; align-items:center; z-index:1000; }
#modal-content { background:#1a1a2a; border:1px solid #3a3a5a; border-radius:12px; max-width:600px; width:90%; max-height:80vh; display:flex; flex-direction:column; }
#modal-header { padding:12px 16px; border-bottom:1px solid #2a2a3a; display:flex; justify-content:space-between; align-items:center; }
#modal-title { font-size:18px; color:#e8d5a8; }
#modal-close { background:none; border:none; color:#888; font-size:24px; cursor:pointer; }
#modal-body { padding:16px; overflow-y:auto; }
@media (max-width:700px) {
  #main-content { flex-direction:column; }
  #side-panel { flex:0 0 auto; max-width:none; border-left:none; border-top:1px solid #1a1a2a; flex-direction:row; flex-wrap:wrap; min-height:80px; }
  #mini-map { display:none; }
  #quick-actions { flex:1; }
  .dir-buttons button { width:40px; height:40px; font-size:16px; }
}