@import url("../../light/css/style.css");

:root {
    --bg:           #15171c;
    --surface:      #1e2128;
    --surface-2:    #262a33;
    --border:       #4d525f;
    --text:         #e6e8ee;
    --text-muted:   #9aa1ad;
    --primary:      #8e48e0;
    --primary-text: #ffffff;
    --ok:           #4cc77f;
    --error:        #ff6b5e;
}

.msg-ok    { background: #14301f; }
.msg-error { background: #3a1714; }

.tpl-dark .game-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.game-card { padding:0; }
.game-main, .game-thumb { padding:0.75rem; }
.game-thumb { background: rgba(255,255,255, 0.03); border-top-left-radius: inherit; border-bottom-left-radius: inherit; width: 23%; min-width:100px;}
.game-thumb img {width:90%; height:auto; background:none; }
@media (max-width: 860px) {
    .tpl-dark .game-list { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
   .game-thumb img {width:65%;}
}
.tpl-dark .game-name a { color: var(--text); }

.tpl-dark .game-card.active, .tpl-dark .poll-card.active { box-shadow: 0 0 0 3px rgba(224, 82, 72, 0.4); }

.tpl-dark .btn-danger { background: #c40000; border-color: #c40000; }

.tpl-dark .players .signup-btn { display: block; width: fit-content; margin-left: auto; }

.tpl-dark input, .tpl-dark select, .tpl-dark textarea {
    background: rgba(0, 0, 0, 0.4);
    color: var(--text);
    border: 1px solid var(--border);
}

.tpl-dark select option {
    background: #1e2128;
    color: var(--text);
}
.tpl-dark select option:checked,
.tpl-dark select option:hover {
    background: var(--primary);
    color: var(--primary-text);
}