:root{font-family:system-ui,-apple-system,Segoe UI,sans-serif;color-scheme:dark;background:#118447;color:#fff}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{height:100vh;height:100dvh;display:grid;grid-template-rows:52px minmax(0,1fr);background:#118447;color:#fff}body[data-phase="amber"]{background:#d79512}body[data-phase="red"]{background:#bd2030}html:has(body[data-phase="amber"]){background:#d79512}html:has(body[data-phase="red"]){background:#bd2030}a{color:inherit;text-decoration:none}header{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px max(12px,env(safe-area-inset-left));background:rgba(0,0,0,.18);border-bottom:1px solid rgba(255,255,255,.25)}.brand{display:flex;align-items:center;gap:8px;min-width:0;font-weight:850}.brand img{width:34px;height:34px;object-fit:contain;flex:none}.brand span{font-size:11px;letter-spacing:.3px}header>a:last-child{font-size:11px;white-space:nowrap}main{min-width:0;min-height:0;padding:8px max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));display:grid;grid-template-rows:minmax(0,1fr) auto;gap:8px;text-align:center;overflow:hidden}.context[hidden],#back[hidden]{display:none}.clock{position:relative;min-width:0;min-height:0;overflow:hidden;color:#fff;grid-row:1}.readout{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}#number{font-size:min(68vw,58vh);font-size:min(68vw,58dvh);font-weight:800;line-height:.95;letter-spacing:-.045em;font-variant-numeric:tabular-nums;-webkit-text-stroke:clamp(1px,.4vw,3px) #162019;paint-order:stroke fill;text-shadow:0 3px 2px rgba(0,0,0,.8),0 0 12px rgba(0,0,0,.3)}#number.foul{font-size:min(19vw,16vh);font-size:min(19vw,16dvh);line-height:1;letter-spacing:-.035em}.actions{grid-row:2;display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;max-width:620px;justify-self:center;min-width:0}.controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%}button{font:inherit;border:1px solid #424950;border-radius:10px;background:#20252b;color:#fff;cursor:pointer;min-width:0;min-height:44px;padding:10px 6px;font-size:18px;font-weight:750;touch-action:manipulation}button:hover:not(:disabled){background:#303740}button:disabled{opacity:.6;cursor:default}.primary{background:#ad1730;border-color:#ad1730}.primary:hover:not(:disabled){background:#c8233e}.small{padding:7px 10px;min-height:34px;font-size:12px;background:rgba(0,0,0,.35);border-color:rgba(255,255,255,.55)}#fullscreen{width:160px;max-width:100%}button:focus-visible,a:focus-visible{outline:3px solid #fff;outline-offset:-3px}.clock[aria-disabled="false"]{cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none}.clock:focus-visible{outline:3px solid #fff;outline-offset:-3px;border-radius:10px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:fullscreen{background:inherit;overflow:hidden}@media(orientation:landscape){body{grid-template-rows:40px minmax(0,1fr)}header{padding-top:4px;padding-bottom:4px}.brand img{width:28px;height:28px}.brand span{font-size:11px}main{grid-template-columns:minmax(0,1fr) clamp(110px,18vw,180px);grid-template-rows:minmax(0,1fr);gap:12px;padding-top:6px;padding-bottom:max(6px,env(safe-area-inset-bottom))}.clock{grid-column:1;grid-row:1}.actions{grid-column:2;grid-row:1;align-self:center}.controls{grid-template-columns:1fr;gap:7px}.controls button{font-size:17px;min-height:44px;padding:10px 6px}#fullscreen{width:100%;margin-top:2px;font-size:12px;min-height:34px}#number{font-size:min(78vh,66vw,800px);font-size:min(78dvh,66vw,800px)}#number.foul{font-size:min(18vh,13vw,160px);font-size:min(18dvh,13vw,160px)}}@media(orientation:landscape) and (max-height:320px){body{grid-template-rows:32px minmax(0,1fr)}.brand img{width:24px;height:24px}.controls button{min-height:34px;font-size:15px;padding:6px}.actions,.controls{gap:5px}#fullscreen{min-height:30px;padding:5px}}@media(max-width:350px) and (orientation:portrait){.brand{gap:5px}.brand img{width:28px;height:28px}.brand span{font-size:10px}header>a:last-child{font-size:10px}.controls button{font-size:16px}}