@font-face {
  font-family: TrueLCDNGE;
  src: url("fonts/true-lcd-nge/true-lcd-nge.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: ArialRoundedMT;
  src: url("fonts/arial-rounded-mt/Arial-Rounded-MT.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: ZenAntique-Regular;
  src: local("Zen Antique"), local("ZenAntique-Regular"), url("fonts/ZenAntique-Regular.ttf") format("truetype");
  font-display: swap;
}

:root { color-scheme: dark; background: #000; }
* { box-sizing: border-box; }
body {
  margin: 0;
  min-width: 280px;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(6px, 1.5vw, 28px);
  background: #000;
  color: #f7931e;
}
main { width: min(100%, 1536px); }
#instrument { display: block; width: 100%; height: auto; max-height: calc(100svh - 116px); }
body.is-embedded { display: block; min-width: 0; min-height: 0; padding: 0; }
.is-embedded main { width: 100%; }
.is-embedded #instrument { max-height: none; }
.is-embedded .format-switch, .is-embedded .format-preview { display: none; }
.format-switch { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.format-switch button { border: 1px solid #f7931e; background: #000; color: #f7931e; padding: 9px 14px; font: 14px/1.2 ArialRoundedMT, monospace; cursor: pointer; }
.format-switch button[aria-pressed="true"] { background: #f7931e; color: #000; }
.format-switch button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.format-preview { min-height: 1.4em; margin: 8px 0 0; text-align: center; font: 12px/1.4 Arial, sans-serif; }
body[data-phase="critical"] .format-switch button,
body[data-phase="ended"] .format-switch button { border-color: #f00; color: #f00; }
body[data-phase="critical"] .format-switch button[aria-pressed="true"],
body[data-phase="ended"] .format-switch button[aria-pressed="true"] { background: #f00; color: #000; }
body:not([data-fonts]) #instrument { visibility: hidden; }
.jp { font-family: ZenAntique-Regular, "Yu Mincho", serif; font-weight: 400; }
.en { font-family: ArialRoundedMT, Arial, sans-serif; }
.lcd { font-family: TrueLCDNGE, monospace; }
body[data-hour-layout="extended"] .hour-frame-shift { transform: translateX(-176px); }
/* The main readout scales as one group; retain the source LCD proportions. */
.signal { fill: #f7931e; }
.signal-border { fill: none; stroke: #f7931e; stroke-width: 2; }
#border-reserve { fill: #000; }
.signal-track { fill: #f7931e; opacity: .16; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }
#font-notice { margin: 12px 0 0; text-align: center; font: 12px/1.7 Arial, sans-serif; overflow-wrap: anywhere; }
#pan-internal, #pan-external, #pan-normal, #pan-racing, #pan-emergency { opacity: .13; }
#bar-normal, #bar-racing { visibility: hidden; }
#strip-internal, #strip-external { visibility: hidden; }
body[data-power="external"] #pan-external,
body[data-power="internal"] #pan-internal,
body[data-phase="external"] #pan-normal,
body[data-phase="internal"] #pan-racing,
body[data-phase="critical"] #pan-emergency,
body[data-phase="ended"] #pan-emergency { opacity: 1; }
body[data-power="external"] #strip-external,
body[data-power="internal"] #strip-internal,
body[data-phase="external"] #bar-normal,
body[data-phase="internal"] #bar-racing { visibility: visible; }
body[data-phase="critical"] #instrument text,
body[data-phase="ended"] #instrument text,
body[data-phase="critical"] .signal,
body[data-phase="ended"] .signal { fill: #ff0000; }
body[data-phase="critical"] #instrument [id^="border-"],
body[data-phase="ended"] #instrument [id^="border-"],
body[data-phase="critical"] .signal-border,
body[data-phase="ended"] .signal-border,
body[data-phase="critical"] #instrument .cls-33,
body[data-phase="critical"] #instrument .cls-34,
body[data-phase="ended"] #instrument .cls-33,
body[data-phase="ended"] #instrument .cls-34 { stroke: #ff0000; }
body[data-phase="critical"] .signal-track,
body[data-phase="ended"] .signal-track { fill: #ff0000; }
/* The event heading stays white throughout every power/countdown phase. */
body #instrument #text-event-title { fill: #fff; }
body[data-phase="ended"] #text-active-time-jp1 { font-family: ZenAntique-Regular, serif; font-size: 71px; letter-spacing: -.07em; }
body[data-phase="ended"] #text-until,
body[data-phase="ended"] #text-active-time-jp2 { visibility: hidden; }
body[data-phase="ended"] #textgroup-clock-sys { animation: exhausted 1s steps(1, end) infinite; }
.power-transfer #pan-internal { animation: transfer 900ms ease-out; }
@keyframes exhausted { 0%, 100% { opacity: 1; } 50% { opacity: .12; } }
@keyframes transfer { from { opacity: .13; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }