:root {
    --ball-drawn: #d62828;
    --ball-open: #2a9d4b;
}

.live-dot {
    display: inline-block;
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    background: #adb5bd;
}
.live-dot.online { background: var(--ball-open); }
.live-dot.offline { background: var(--ball-drawn); }

/* Steuer-Ansicht: 5×15-Raster mit Kreisen */
.ctrl-grid {
    display: grid;
    grid-template-columns: 2.2rem repeat(15, minmax(0, 1fr));
    gap: .3rem;
    max-width: 1100px;
}
.ctrl-grid .letter {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.3rem;
}
.ctrl-grid .cell {
    aspect-ratio: 1;
    border: 1px solid #dee2e6;
    border-radius: .3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8%;
    container-type: inline-size;
}
.ctrl-grid .ball {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: none;
    color: #fff;
    font-weight: 700;
    font-size: 42cqi;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    transition: transform .1s, background-color .2s;
}
.ctrl-grid .ball.open { background: var(--ball-open); }
.ctrl-grid .ball.drawn { background: var(--ball-drawn); }
.ctrl-grid .ball.last { box-shadow: 0 0 0 3px #ffc107; }
.ctrl-grid .ball:hover { transform: scale(1.08); }
.ctrl-grid .ball:disabled { opacity: .6; cursor: wait; }

.last-ball {
    font-size: 2rem;
    font-weight: 700;
    color: var(--ball-drawn);
}
.last-ball.empty { color: #adb5bd; }