/* static/design/style.css */
body { margin:0; background:#111; color:#eee; font-family:Arial, sans-serif; }
.page-wrap { display:flex; justify-content:center; padding:20px; }
.card { width:90%; max-width:1200px; background:#1b1b1b; padding:20px; border-radius:12px; }
header h1, header h2 { text-align:center; margin:10px 0; }
.main {gap:20px; margin-top:20px; }
.left { flex:2; }
.right { flex:1; }
.player-box { background:#222; padding:15px; border-radius:10px; }
.chat { display:flex; flex-direction:column; height:500px; background:#222; padding:10px; border-radius:10px; }
.chat-messages { flex:1; overflow-y:auto; background:#111; padding:10px; border-radius:8px; margin-bottom:10px; }
.chat-input input { width:100%; padding:8px; margin:5px 0; border-radius:6px; border:0; background:#333; color:#eee; }
.btn { background:#444; padding:8px 12px; border-radius:6px; cursor:pointer; border:0; color:#eee; }


@media (min-width: 768px){
    .main{
        display: flex!important;
    }
}