:root { color-scheme: dark; background: #000; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; min-height: 100dvh; overflow: hidden; background: #000; overscroll-behavior: none; }
body { display: grid; place-items: center; touch-action: manipulation; cursor: none; }
body[data-color="green"], html[data-color="green"] { background: #16c447; }
body[data-color="yellow"], html[data-color="yellow"] { background: #ffe000; }
body[data-color="red"], html[data-color="red"] { background: #ed1717; }

#countdown { color: #fff; font: 700 clamp(80px, 28vw, 480px)/1 Arial, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
#speaking-status { position:fixed;top:calc(12px + env(safe-area-inset-top));left:calc(12px + env(safe-area-inset-left));padding:7px 10px;border-radius:7px;background:rgba(0,0,0,.65);color:#fff;font:500 12px/1.4 Arial,sans-serif;animation:speaking-pulse 1.4s ease-in-out infinite;pointer-events:none; }
#fullscreen-button { position:fixed;top:calc(8px + env(safe-area-inset-top));right:calc(8px + env(safe-area-inset-right));min-height:44px;padding:8px 12px;border:1px solid rgba(255,255,255,.25);border-radius:8px;background:rgba(0,0,0,.65);color:#fff;font:500 12px/1.4 Arial,sans-serif;cursor:pointer; }
#fullscreen-button:focus-visible { outline:2px solid white;outline-offset:3px; }
@keyframes speaking-pulse { 0%,100%{opacity:1}50%{opacity:.4} }
@media(prefers-reduced-motion:reduce){#speaking-status{animation:none}}