.draw-timing-fieldset { margin: 0; padding: .75rem 1rem 1rem; border: 0; min-width: 0;  }
.draw-timing-legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.draw-timing-row { display: grid; grid-template-columns: 5.5rem 1fr auto; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.draw-timing-row label { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #ccc; }
.draw-timing-row select { grid-column: 2 / -1; }
.draw-timing-fieldset select, .draw-timing-number input { min-height: 40px; padding: .3rem .6rem; border: 1px solid rgba(255,255,255,.2); border-radius: .65rem; background: rgba(0,0,0,.55); color: #fff; font-size: 13px; }
.draw-timing-number { display: inline-flex; align-items: center; gap: .35rem; font-size: 10px; color: #aaa; }
.draw-timing-number input { width: 5rem; }
#draw-time-slider { width: 100%; min-width: 0; accent-color: var(--app-accent, #22d3ee); }
.draw-timing-remember { display: flex; align-items: center; gap: .6rem; min-height: 40px; font-size: 12px; font-weight: 700; cursor: pointer; }
.draw-timing-remember input { width: 20px; height: 20px; accent-color: var(--app-accent, #22d3ee); }
#draw-timing-help { margin: .3rem 0 0; font-size: 10px; line-height: 1.5; color: #999; }
.draw-timing-modal :focus-visible, .draw-timing-open:focus-visible, #stop-roll-btn:focus-visible { outline: 2px solid var(--draw-ball-highlight, #fff); outline-offset: 3px; }
.draw-timing-fieldset:has(#draw-timing-mode [value="manual"]:checked) #draw-timing-seconds-row { opacity: 1; }
#stop-roll-btn { position: absolute; left: 50%; transform: translateX(-50%); bottom: max(25px, env(safe-area-inset-bottom)); z-index: 11; min-height: 48px; padding: .8rem 1.4rem; border: 1px solid rgba(255,255,255,.7); border-radius: .85rem; background: #fff; color: #000; font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
#stop-roll-btn:hover { background: #ecfeff; }
#stop-roll-btn[hidden] { display: none !important; }
@media (max-width: 767px) {
    .draw-timing-row { grid-template-columns: 1fr auto; }
    .draw-timing-row label { grid-column: 1 / -1; }
    .draw-timing-row select { grid-column: 1 / -1; }
    #stop-roll-btn { bottom: calc(max(25px, env(safe-area-inset-bottom)) + 56px); }
}

.draw-timing-open { min-height: 48px; padding: .6rem 1.2rem; border: 1px solid rgba(255,255,255,.2); border-radius: 1rem; background: rgba(255,255,255,.05); color: rgba(255,255,255,.8); font-size: 10px; font-weight: 900; letter-spacing: .25em; text-transform: uppercase; cursor: pointer; position: relative; z-index: 6; }
.draw-timing-open:hover { background: rgba(255,255,255,.1); color: #fff; }
#draw-timing-open { display: none; }
.draw-timing-idle-open { display: inline-flex; margin-top: .75rem; }
.draw-timing-live-open { position: absolute; top: max(16px, env(safe-area-inset-top)); right: 16px; z-index: 11; }
.draw-timing-modal { width: min(calc(100vw - 24px), 26rem); max-width: 26rem; max-height: calc(100dvh - 24px); margin: auto; padding: 0; border: 1px solid rgba(255,255,255,.12); border-radius: 1.5rem; background: #171717; color: #eee; overflow: hidden; }
.draw-timing-modal:not([open]) { display: none; }
.draw-timing-modal::backdrop { background: rgba(0,0,0,.85); backdrop-filter: blur(8px); }
.draw-timing-sheet { max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; padding: 1rem; }
.draw-timing-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.draw-timing-head h2 { margin: 0; font-size: 1.1rem; font-weight: 900; letter-spacing: -.02em; text-transform: uppercase; color: #fff; }
.draw-timing-close { width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: transparent; color: #fff; font-size: 24px; cursor: pointer; }
.draw-timing-modal fieldset:disabled { opacity: .6; }
#draw-timing-live-note { margin: .3rem 0; font-size: 11px; line-height: 1.5; color: #bbb; }
.draw-timing-modal select, .draw-timing-modal input[type=number] { min-height: 48px; }
.draw-timing-modal .draw-timing-remember { min-height: 48px; }
.draw-timing-modal #draw-time-slider { min-height: 32px; }
@media (max-width: 767px) {
    .draw-timing-live-open { top: auto; bottom: calc(max(25px, env(safe-area-inset-bottom)) + 120px); right: 50%; transform: translateX(50%); }
}

/* Opaque, high-contrast entry points */
.draw-timing-open { background: #0b1118; color: #fff; border: 2px solid #fff; box-shadow: 0 4px 16px #000c; }
.draw-timing-open:hover { background: #17212c; color: #fff; }
.draw-timing-open:focus-visible { outline: 3px solid var(--draw-ball-highlight, #fff); outline-offset: 3px; box-shadow: 0 0 0 6px #000; }

/* Desktop live timing: bottom-left dock, clear of header Settings/audio, caption, Stop and Skip */
@media (min-width: 768px) {
    .draw-timing-live-open { top: auto; right: auto; left: max(16px, 2vw); bottom: max(25px, env(safe-area-inset-bottom)); transform: none; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; max-width: min(200px, 24vw); padding-top: .9rem; letter-spacing: .18em; }
    .draw-timing-live-open::before { content: "Live control"; position: absolute; top: 4px; left: 1.2rem; font-size: 7px; letter-spacing: .22em; color: rgba(255,255,255,.65); }
}