html { font-size: 14px; }
@media (min-width: 768px) { html { font-size: 16px; } }

body { min-height: 100vh; }

.group-card { border-left: 4px solid #0d6efd; }
.team-pick { transition: background-color .15s; cursor: pointer; }
.team-pick:hover { background-color: #f1f5ff; }
.team-pick.checked { background-color: #d1e7dd; border-color: #198754; }

.points-badge {
    display: inline-block;
    min-width: 2.25rem;
    padding: .15rem .4rem;
    border-radius: .5rem;
    background: #6c757d;
    color: #fff;
    text-align: center;
    font-weight: 600;
    font-size: .85rem;
}
.points-1 { background: #198754; }
.points-2 { background: #20c997; }
.points-3 { background: #0dcaf0; color: #042940; }
.points-4 { background: #ffc107; color: #4d3a00; }
.points-5 { background: #dc3545; }

.host-flag { font-size: .7rem; color: #fd7e14; font-weight: 600; }

#picker-counter {
    position: sticky; top: 0; z-index: 10;
    background: #fff; padding: .75rem 1rem;
    border-bottom: 1px solid #dee2e6;
    margin: -1rem -1rem 1rem -1rem;
}