/* ================= BODY ================= */
body { margin:0; font-family:Tahoma, Arial, sans-serif; background:#0f141d; color:#e5e5e5; }
body.light { background:#f5f5f5; color:#222; }
body.pink { background:#ffe6f0; color:#222; }

/* CONTAINER */
.container { max-width:900px; margin:0 auto; padding:20px; display:flex; flex-direction:column; }

/* HEADER */
.header { display:flex; justify-content:space-between; align-items:center; background:#17212b; padding:12px 20px; border-radius:12px; margin-bottom:20px; font-weight:bold; font-size:18px; }
body.light .header { background:#ddd; color:#222; }
body.pink .header { background:#ffb6c1; color:#222; }

/* HEADER LINK بازی */
.header .game-link { margin-left:15px; background:#FFD700; color:#222; padding:6px 12px; border-radius:20px; text-decoration:none; font-weight:bold; transition:background 0.2s; }
.header .game-link:hover { background:#e6c200; }

/* CHAT BOX */
.chat-box { background:#1e2a38; padding:15px; border-radius:12px; height:500px; overflow-y:auto; display:flex; flex-direction:column; }
body.light .chat-box { background:#e0e0e0; }
body.pink .chat-box { background:#ffd6e7; }

/* MESSAGE */
.message { background:#273546; padding:10px; border-radius:12px; margin-bottom:10px; max-width:70%; word-wrap:break-word; position:relative; }
.message.me { background:#3390ec; align-self:flex-end; }
.message.other { background:#2e3b4f; align-self:flex-start; }
body.light .message.me { background:#3390ec; color:white; }
body.light .message.other { background:#cfcfcf; color:black; }
body.pink .message.me { background:#ff69b4; color:white; }
body.pink .message.other { background:#ffc0cb; color:#222; }

.message img { max-width:220px; max-height:220px; border-radius:12px; object-fit:cover; display:block; margin-top:5px; cursor:pointer; }

.message a.file-link { display:inline-block; color:#7dd3fc; text-decoration:none; margin-top:5px; }
.message a.file-link:hover { text-decoration:underline; }

/* تایمر */
.message small { font-size:11px; color:#FFD700; font-weight:bold; }

/* CHAT FORM */
.chat-form { margin-top:15px; display:flex; gap:10px; }
.chat-form input[type="text"] { flex:1; padding:12px; border-radius:25px; border:none; outline:none; background:#0e1621; color:white; }
body.light .chat-form input[type="text"] { background:#fff; color:#222; }
body.pink .chat-form input[type="text"] { background:#fff0f5; color:#222; }
.chat-form input[type="file"] { color:white; }
.chat-form button { padding:12px 20px; border-radius:25px; border:none; background:#3390ec; color:white; font-weight:bold; cursor:pointer; transition:background 0.2s; }
.chat-form button:hover { background:#1e6fd0; }

/* LOGIN / REGISTER */
.center {justify-content:center; display:flex; align-items:center; height:100vh;}
.login-box { background:#17212b; padding:40px; border-radius:15px; width:100%; max-width:400px; box-shadow:0 0 25px rgba(0,0,0,0.5); text-align:center; }
body.light .login-box { background:#fff; color:#222; }
body.pink .login-box { background:#ffc0cb; color:#222; }
.login-box h2 {margin-bottom:20px; color:white;}
body.light .login-box h2 {color:#222;}
body.pink .login-box h2 {color:#222;}
.login-box input[type="text"], .login-box input[type="password"] { width:100%; padding:12px; border-radius:25px; border:none; margin-bottom:15px; background:#0e1621; color:white; outline:none; }
body.light .login-box input[type="text"], body.light .login-box input[type="password"] { background:#fff; color:#222; }
body.pink .login-box input[type="text"], body.pink .login-box input[type="password"] { background:#fff0f5; color:#222; }
.login-box button { width:100%; padding:12px; border-radius:25px; border:none; background:#3390ec; color:white; font-size:15px; cursor:pointer; transition:background 0.2s; }
.login-box button:hover {background:#1e6fd0;}
.login-box .error {color:#f87171;margin-bottom:15px;}
.login-box a {color:#7dd3fc; text-decoration:none;}
.login-box a:hover {text-decoration:underline;}
.header a {color:#7dd3fc;}
.header a:hover {text-decoration:underline;}

/* MODAL */
.modal { display:none; position:fixed; z-index:1000; left:0; top:0; width:100%; height:100%; overflow:auto; background-color:rgba(0,0,0,0.8); }
.modal-content { margin:5% auto; display:block; max-width:90%; max-height:90%; border-radius:12px; }
.modal-close { position:absolute; top:20px; right:35px; color:#fff; font-size:40px; font-weight:bold; cursor:pointer; }

/* RESPONSIVE */
@media screen and (max-width:600px){
    .chat-box {height:400px;}
    .message img {max-width:150px; max-height:150px;}
    .container {padding:10px;}
}