/* styles.css */
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

body { background-color: #1a1a1a; color: #f0f0f0; }

/* -- index.php Layout -- */
.center-layout { display: flex; justify-content: center; align-items: center; min-height: 100vh; }
.card { background: #2a2a2a; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.5); width: 100%; max-width: 500px; text-align: center; }
.card h1 { margin-bottom: 1.5rem; color: #4CAF50; }
.forms-container { display: flex; flex-direction: column; gap: 2rem; }
.form-section { background: #333; padding: 1.5rem; border-radius: 6px; }
.form-section h2 { font-size: 1.1rem; margin-bottom: 1rem; }
.error-msg { color: #ff5252; margin-bottom: 1rem; min-height: 20px; }

/* -- room.php Layout -- */
.room-layout { display: flex; height: 100vh; overflow: hidden; }

.board-container { flex: 1; background: #000; display: flex; justify-content: center; align-items: center; border-right: 2px solid #444; }
canvas { background: #222; box-shadow: 0 0 15px rgba(0,0,0,0.8); }

.panel-container { width: 350px; background: #2a2a2a; display: flex; flex-direction: column; padding: 1rem; }
.panel-header { margin-bottom: 1rem; border-bottom: 1px solid #444; padding-bottom: 1rem; }
.panel-header h2 { font-size: 1.2rem; color: #4CAF50; margin-bottom: 0.5rem; }
.panel-header span { color: #fff; font-family: monospace; letter-spacing: 2px; }

/* -- Formularios & Botones Generales -- */
input[type="text"], input[type="password"] { width: 100%; padding: 10px; margin-bottom: 10px; background: #111; border: 1px solid #444; color: #fff; border-radius: 4px; }
button { width: 100%; padding: 10px; background: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; transition: 0.2s; }
button:hover { background: #45a049; }
.btn-secondary { background: #2196F3; }
.btn-secondary:hover { background: #1976D2; }

/* -- Chat Area -- */
.chat-box { flex: 1; background: #111; border: 1px solid #444; border-radius: 4px; padding: 10px; overflow-y: auto; margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px; }
.msg { font-size: 0.9rem; word-wrap: break-word; }
.msg-time { color: #888; font-size: 0.75rem; margin-right: 4px; }
.msg-normal { color: #ccc; }
.msg-dado { color: #FFEB3B; font-weight: bold; background: rgba(255, 235, 59, 0.1); padding: 5px; border-left: 3px solid #FFEB3B; }

.chat-input-container { display: flex; gap: 5px; margin-bottom: 20px; }
.chat-input-container input { margin-bottom: 0; }
.chat-input-container button { width: auto; padding: 0 15px; }

/* -- Dice Area -- */
.dice-container h3 { font-size: 1rem; margin-bottom: 10px; color: #aaa; text-align: center; }
.dice-buttons { display: flex; gap: 10px; justify-content: space-between; }
.dice-buttons button { background: #E91E63; }
.dice-buttons button:hover { background: #D81B60; }