:root { --icon:max(4.4vh, 40px); --lt:29vh; --tbud:calc(100vw - var(--lt) - 9vw); --tmax:66vh; --ln:2; --red:#e53935; --amber:#ffb300; --green:#2ecc40; --blue:#42a5f5; --fg:#fff; }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; background:#000; color:var(--fg); font-family:system-ui,Arial,sans-serif; overflow:hidden; }
body { transition: background .2s; }
body[data-light=green] { background:#031a06; }
body[data-light=amber] { background:#1f1600; }
body[data-light=red] { background:#1a0504; }
body[data-light=blue] { background:#04101c; }
#stage { touch-action:none; position:relative; height:100%; display:grid; grid-template-columns:1fr auto; grid-template-rows:1fr auto; grid-template-areas:"time lights" "foot lights"; column-gap:3vw; padding:2vh 3vw; }
#stage.light-left { grid-template-columns:auto 1fr; grid-template-areas:"lights time" "lights foot"; }
#preset { position:absolute; top:1.2vh; left:0; right:0; font-size:3vh; opacity:.5; text-align:center; pointer-events:none; }
#time { grid-area:time; align-self:center; justify-self:center; font-size:min(calc(var(--tbud) / var(--tn, 2)), var(--tmax)); font-weight:700; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
#lights { grid-area:lights; display:flex; flex-direction:column; justify-content:space-between; align-items:center; }
#lights i { width:var(--lt); height:var(--lt); border-radius:50%; background:#222; display:block; }
body[data-light=red] #l-red { background:var(--red); box-shadow:0 0 5vh var(--red); }
body[data-light=amber] #l-amber { background:var(--amber); box-shadow:0 0 5vh var(--amber); }
body[data-light=green] #l-green { background:var(--green); box-shadow:0 0 5vh var(--green); }
body[data-light=blue] #lights i { background:var(--blue); opacity:.5; }
body[data-light=red] #time { color:var(--red); }
body[data-light=amber] #time { color:var(--amber); }
body[data-light=green] #time { color:var(--green); }
body[data-light=blue] #time { color:var(--blue); }
body.blink #l-red { animation:blink .5s steps(1) infinite; }
@keyframes blink { 50% { background:#222; box-shadow:none; } }
body.paused #time { opacity:.4; }
#foot { grid-area:foot; display:flex; align-items:flex-end; gap:2vw; padding-bottom:4vh; font-weight:700; }
#foot { position:relative; }
#footnext { position:absolute; left:0; bottom:100%; margin-bottom:.8vh; white-space:pre; line-height:1.15; font-size:5.5vh; font-weight:700; opacity:.75; visibility:hidden; }
body.footnext #footnext { visibility:visible; }
#endbox { position:relative; min-width:14vw; line-height:1; }
#endbox small { display:block; font-size:5vh; font-weight:400; opacity:.75; }
#end { display:block; font-size:13vh; }
#endbox.off { visibility:hidden; }
#letters { display:flex; flex:1; justify-content:center; font-size:min(26vh, calc((100vw - var(--lt) - 24vw) / (var(--ln, 2) * .85))); line-height:.9; }
#letters span { display:inline-block; width:.85em; text-align:center; visibility:hidden; }
#letters span.on { visibility:visible; }
#hint { position:absolute; left:0; right:0; bottom:.8vh; text-align:center; font-size:max(2.6vh, 12px); opacity:.55; pointer-events:none; }
body.nohints #hint { visibility:hidden; }
#gear, #info, #mute, #actionsbtn, #fsbtn { position:fixed; top:max(1.2vh, 4px); width:var(--icon); height:var(--icon); padding:0; display:flex; align-items:center; justify-content:center; background:none; color:#fff; opacity:.25; cursor:pointer; line-height:1; }
#gear { left:1vw; border:2px solid transparent; font-size:calc(var(--icon) * .9); }
#info { left:calc(1vw + var(--icon) * 1.27); border:2px solid transparent; font-size:calc(var(--icon) * .9); font-weight:700; }
#gear:hover, #info:hover, #mute:hover, #actionsbtn:hover, #fsbtn:hover, #gear:focus-visible, #info:focus-visible, #mute:focus-visible, #actionsbtn:focus-visible, #fsbtn:focus-visible { opacity:1; }
#actionsbtn { left:calc(1vw + var(--icon) * 3.81); border:2px solid transparent; }
#actionsbtn svg { width:70%; height:70%; }
#fsbtn { left:calc(1vw + var(--icon) * 5.08); border:2px solid transparent; }
#fsbtn svg { width:70%; height:70%; }
body.lightleft #fsbtn { left:auto; right:calc(1vw + var(--icon) * 5.08); }
body.lightleft #actionsbtn { left:auto; right:calc(1vw + var(--icon) * 3.81); }
#mute { left:calc(1vw + var(--icon) * 2.54); border:2px solid transparent; }
#mute svg { width:78%; height:78%; }
#mute.muted { opacity:1; color:var(--amber); }
#gate { position:fixed; top:0; right:0; bottom:0; left:0; background:#000e; display:flex; align-items:center; justify-content:center; text-align:center; font-size:4vh; }
#gate h1 { font-size:10vh; margin:0 0 2vh; }
#menu, #help { position:fixed; top:0; right:0; bottom:0; left:0; background:#000f; overflow:auto; padding:3vh 6vw; font-size:max(2.4vh,16px); }
#menu :focus, #help :focus { outline:3px solid var(--blue); }
#help table { border-collapse:collapse; width:100%; }
#help td { padding:.8vh 1vw; border-bottom:1px solid #333; vertical-align:middle; }
#help td:first-child { font-weight:700; }
#help td:last-child { width:1%; }
#help p { opacity:.6; }
#help h3 { margin:2vh 0 .5vh; opacity:.7; }
#help button { font-size:inherit; padding:.6vh 1vw; background:#222; color:#fff; border:2px solid #555; border-radius:6px; margin-top:1vh; margin-right:1vw; }
#menu[hidden], #gate[hidden], #help[hidden] { display:none; }
#menu h2 { margin:0 0 2vh; }
#menu label { display:flex; justify-content:space-between; align-items:center; gap:2vw; padding:1vh 0; border-bottom:1px solid #333; }
#menu input, #menu select, #menu button { font-size:inherit; padding:.6vh 1vw; background:#222; color:#fff; border:2px solid #555; border-radius:6px; }
#menu input[type=checkbox] { width:3vh; height:3vh; }
#menu input[type=number] { width:8ch; }
#menu input[type=text] { width:30ch; }
#menu textarea { font:inherit; background:#222; color:#fff; border:2px solid #555; border-radius:6px; padding:.6vh 1vw; }
#menu .btns { display:flex; gap:1vw; flex-wrap:wrap; margin:2vh 0; }
#menu small { opacity:.6; display:block; margin-top:2vh; line-height:1.5; }
body.fs #preset { display:none; }
body.fs #stage { padding-top:1vh; }
#help .warn { color:var(--amber); margin-top:.4vh; }
#help .ok { color:var(--green); margin-top:.4vh; }
#help tr.unassigned td { color:var(--amber); }
#time.msg { white-space:normal; text-align:center; font-size:min(7vw,13vh); line-height:1.15; letter-spacing:0; font-weight:600; width:100%; }
#time.two { font-size:0; text-align:center; white-space:nowrap; }
#time.two div { line-height:1; }
#time.ghost { visibility:hidden; }
/* "Show nothing" waiting screen variants */
body.horiz #lights { grid-column:1 / -1; grid-row:1; flex-direction:row; justify-content:center; gap:3vw; align-self:center; }
body.horiz { --lt:min(26vw,56vh); }
#statetag { position:absolute; top:max(8vh, calc(var(--icon) + 12px)); left:3vw; font-size:6.5vh; font-weight:700; opacity:.75; visibility:hidden; pointer-events:none; }
body.retrieving #statetag { visibility:visible; }
/* Light on the left: the corner icons and the state label move clear of the light column */
body.lightleft #gear { left:auto; right:1vw; }
body.lightleft #info { left:auto; right:calc(1vw + var(--icon) * 1.27); }
body.lightleft #mute { left:auto; right:calc(1vw + var(--icon) * 2.54); }
body.lightleft #statetag { left:calc(var(--lt) + 8vw); }
/* Settings panel: related settings share a titled box, and dependent ones are indented under an accent line */
#menu .group { border-bottom:1px solid #2c3a4a; padding:0 0 1.4vh; margin:0 0 2vh; }
#menu .group:last-of-type { border-bottom:0; }
#menu .group h3 { margin:0 0 .4vh; font-size:inherit; text-transform:uppercase; letter-spacing:.1em; color:var(--blue); }
#menu .group .note { margin:0 0 .8vh; opacity:.6; font-size:.85em; }
#menu .group label:last-child { border-bottom:0; }
#menu label.sub { margin-left:2vw; padding-left:1.4vw; border-left:4px solid var(--blue); }
/* Close button, per-row reset buttons */
#menu .closex, #help .closex { position:fixed; top:max(1.2vh, 4px); left:1vw; z-index:5; width:var(--icon); height:var(--icon); padding:0; margin:0; display:flex; align-items:center; justify-content:center; background:none; border:2px solid transparent; border-radius:0; color:#fff; font-size:calc(var(--icon) * .9); line-height:1; opacity:.25; cursor:pointer; }
body.lightleft #menu .closex, body.lightleft #help .closex { left:auto; right:1vw; }
#menu .closex:hover, #help .closex:hover, #menu .closex:focus-visible, #help .closex:focus-visible { opacity:1; }
#menu, #help { padding-top:max(8vh, calc(var(--icon) + 14px)); }
#menu label .ctl { display:flex; align-items:center; gap:.8vw; }
#menu button.reset { padding:.2vh .7vw; font-size:.8em; }
#help td.acts { white-space:nowrap; }
#help td.acts button { margin:0 .4vw 0 0; }
#help button:disabled { opacity:.35; }
/* Touch: no pull-to-refresh or pinch zoom on the clock, the panels still scroll, and the long-press ring */
html, body { overscroll-behavior:none; }
#menu, #help { touch-action:pan-y; }
body.recording #help { touch-action:none; }
#ring { position:fixed; display:none; width:14vh; height:14vh; margin:-7vh 0 0 -7vh; pointer-events:none; z-index:9; }
#ring.on { display:block; }
#ring svg { width:100%; height:100%; transform:rotate(-90deg); }
#ring circle { fill:none; stroke:var(--red); stroke-width:9; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100; animation:ringfill var(--hold, 1s) linear forwards; }
@keyframes ringfill { to { stroke-dashoffset:0; } }

/* Selecting text or the iOS long-press callout would fight the gestures */
#stage { user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }

/* Portrait phones: the lights in a row across the top, then the big clock, then the end number above the group letters */
@media (max-aspect-ratio: 1/1) {
  :root { --lt: min(28vw, 22vh); --tbud: 94vw; --tmax: 30vh; }
  #stage, #stage.light-left { grid-template-columns:minmax(0, 1fr); grid-template-rows:auto auto minmax(0, 1fr) auto; grid-template-areas:"lights" "state" "time" "foot"; column-gap:0; row-gap:1vh; padding:max(7vh, calc(var(--icon) + 8px)) 4vw 2vh; }
  #lights { flex-direction:row; justify-content:center; gap:3vw; align-self:start; }
  #statetag { position:static; grid-area:state; justify-self:center; font-size:4.5vh; }
  #preset { display:none; }
  #foot { flex-direction:column; align-items:stretch; gap:1vh; padding-bottom:3vh; }
  #endbox { display:flex; align-items:baseline; gap:3vw; min-width:0; }
  #endbox small, #end { display:inline; }
  #endbox small { font-size:4vh; }
  #end { font-size:9vh; }
  #letters { flex:none; font-size:min(22vh, calc(92vw / (var(--ln, 2) * .85))); }
  body.fs #stage { padding-top:max(7vh, calc(var(--icon) + 12px)); } /* full screen keeps the room for the corner icons above the lights */
  body.horiz { --lt:min(28vw, 22vh); }
  body.horiz #lights { grid-column:auto; grid-row:auto; align-self:start; }
}

/* Quick actions panel: a bottom sheet with a big button for every action */
#actions { position:fixed; left:0; right:0; bottom:0; max-height:62vh; overflow-y:auto; z-index:6; touch-action:pan-y; padding:1.2vh 3vw 2vh; background:rgba(0,0,0,.94); border-top:2px solid #2c3a4a; font-size:max(2.4vh,16px); }
#actions[hidden] { display:none; }
#actions .ahead { display:flex; justify-content:space-between; align-items:center; position:sticky; top:-1.2vh; background:#000; padding:.6vh 0; z-index:1; }
#actions h3 { margin:0; font-size:inherit; text-transform:uppercase; letter-spacing:.1em; color:var(--blue); }
#actions h4 { margin:1.4vh 0 .6vh; font-size:.85em; opacity:.6; font-weight:400; }
#actions .agrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(max(20vh, 120px), 1fr)); gap:1vh 1.2vw; }
#actions button { font-size:inherit; padding:0 1vw; min-height:max(10vh, 48px); background:#1b2430; color:#fff; border:2px solid #3b4a5c; border-radius:10px; cursor:pointer; }
#actions button:active { background:#2a3a50; }
#actions button.danger { grid-column:1 / -1; background:#7a1210; border-color:var(--red); font-weight:700; letter-spacing:.06em; }
#actions button.aclose { min-height:0; padding:.6vh 2vw; }
#actions :focus-visible { outline:3px solid var(--blue); }
#actions .aclock { font-size:1.8em; font-weight:700; font-variant-numeric:tabular-nums; }
/* Narrow or short screens: settings rows wrap instead of scrolling sideways */
#menu label { flex-wrap:wrap; }
#menu select { max-width:70vw; text-overflow:ellipsis; }
#menu textarea, #menu input[type=text] { max-width:100%; }
#menu label .ctl { flex-wrap:wrap; justify-content:flex-end; max-width:100%; }