body { margin: 0; overflow: hidden; font-family: 'Tahoma', sans-serif; background: #000; user-select: none; }
.hidden { display: none !important; }
.panel { background: rgba(16, 22, 30, 0.95); border: 2px solid #585858; padding: 20px; color: #d4d4d4; border-radius: 4px; }
.center-panel { text-align: center; }

/* Loading */
#loading-overlay { position: absolute; width: 100%; height: 100%; background: #000; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #cba300; }
.spinner { border: 4px solid #333; border-top: 4px solid #cba300; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin-bottom: 20px; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* UI */
#status-window { position: absolute; top: 10px; left: 10px; width: 220px; padding: 10px; background: rgba(0,0,0,0.7); border: 1px solid #444; border-radius: 5px; pointer-events: none; }
#char-name-display { color: #cba300; font-weight: bold; margin-bottom: 5px; text-shadow: 1px 1px 0 #000; }
.stat-row { display: flex; align-items: center; margin-bottom: 3px; font-size: 11px; font-weight: bold; }
.label { width: 25px; color: #ccc; }
.val { width: 35px; text-align: right; color: white; }
.bar-bg { flex-grow: 1; height: 8px; background: #222; border: 1px solid #555; margin: 0 5px; }
.bar { height: 100%; }
.cp { background: #b8860b; } .hp { background: #8b0000; } .mp { background: #00008b; }

#chat-container { position: absolute; bottom: 140px; left: 20px; width: 350px; height: 150px; display: flex; flex-direction: column; pointer-events: auto; }
#chat-history { flex-grow: 1; background: rgba(0,0,0,0.5); border: 1px solid #444; overflow-y: auto; color: white; font-size: 12px; padding: 5px; text-shadow: 1px 1px #000; }
#chat-input { width: 100%; box-sizing: border-box; border: 1px solid #444; background: rgba(0,0,0,0.7); color: white; padding: 5px; }

#action-bars { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 5px; pointer-events: auto; background: rgba(0,0,0,0.8); padding: 5px; border: 1px solid #444; border-radius: 5px; }
.bar-row { display: flex; gap: 4px; justify-content: center; }
.shortcut-slot { width: 45px; height: 45px; background: #222; border: 1px solid #555; position: relative; display: flex; align-items: center; justify-content: center; }
.key-bind { position: absolute; top: 2px; left: 2px; font-size: 10px; color: #cba300; font-weight: bold; pointer-events: none; z-index: 2; text-shadow: 1px 1px 0 #000; }
.skill-icon { width: 40px; height: 40px; cursor: pointer; border: 1px solid #777; }

#login-screen, #char-select { position: absolute; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 100; background: #050505; }
#login-screen { background: url('https://threejs.org/examples/textures/terrain/grasslight-big.jpg') no-repeat center/cover; }
input { padding: 10px; background: #222; border: 1px solid #555; color: white; outline: none; }
button { background: linear-gradient(to bottom, #2a4060, #1a2c45); color: #cba300; border: 1px solid #555; padding: 10px 25px; cursor: pointer; font-weight: bold; }
.char-cards { display: flex; gap: 20px; margin-top: 20px; }
.card { width: 200px; height: 300px; background: #222; border: 2px solid #444; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s; color: #aaa; }
.card:hover { border-color: #cba300; color: white; background: #2a2a2a; }
.nameplate { color: #ffffff; font-size: 12px; font-weight: bold; text-shadow: 1px 1px 0 #000; position: absolute; pointer-events: none; white-space: nowrap; }
#skill-book { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; pointer-events: auto; z-index: 50; }
#skill-list-container { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
#profile-btn { position: absolute; bottom: 140px; right: 20px; pointer-events: auto; }