#livesLabel { color: var(--bad); letter-spacing: 1px; }

.dc-stage { height: clamp(380px, calc(100vh - 320px), 620px); touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.dc-stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
@media (pointer: fine) { .dc-stage canvas { cursor: none; } }
.dc-stage .ba-banner { color: #ffd34d; text-shadow: 0 2px 0 #3a1a08, 0 0 18px #000; }

.dc-rule { position: absolute; z-index: 2; top: 10px; left: 50%; transform: translateX(-50%); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 10px; min-width: min(420px, 92%); padding: 8px 16px 12px; overflow: hidden; border: 2px solid #6b4a26; border-radius: 12px; background: #f1dfb8f2; color: #24160a; text-align: center; box-shadow: 0 6px 18px #0008; pointer-events: none; }
.dc-rule-title { font-size: var(--small); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.dc-rule strong { font-size: 26px; line-height: 1.15; }
.dc-rule-next { flex-basis: 100%; color: #9a3412; font-size: var(--small); font-weight: 700; }
.dc-rule-next:empty { display: none; }
.dc-rule-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #6b4a26; transform-origin: left; }
.dc-rule.is-warn { animation: dc-warn .5s infinite alternate; border-color: #dc2626; }
@keyframes dc-warn { to { background: #fde68af2; } }

@media (max-width: 699px) {
    .dc-stage { height: 380px; }
    .dc-rule strong { font-size: 20px; }
}