/* ═══════════════════════════════════════════════════════
   KUMITE CLOCK — Fully scoped under .kc-page
   No global side-effects. Navy / Gold / Silver theme.
   ═══════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{
  background:var(--ks-band-deep,#050A14);color:#E0DCD2;
  font-family:'Raleway',sans-serif;
  min-height:100vh;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ── Page wrapper ──
   The chrome (topbar, hero band, page footer) sits on the shared band
   tokens, which clock-context.mjs re-derives from the tenant's own primary
   colour — the same derivation every tenant page's bands use. Gold stays the
   MATCH surface's identity (timer ring, start, senshu); the chrome accent
   follows the tenant, falling back to gold if the token layer is absent. */
.kc-page{
  --navy:#050A14;--navy-mid:#0A1324;--navy-deep:#030712;
  --gold:#C9A84C;--gold-lt:#F0DC9A;--gold-dim:rgba(201,168,76,0.18);
  --silver:#B0BEC5;--silver-lt:#CFD8DC;
  --aka:#c02020;--aka-lt:#ff5252;--aka-dim:rgba(192,32,32,0.18);--aka-soft:rgba(192,32,32,0.55);
  --ao:#1565C0;--ao-lt:#42A5F5;--ao-dim:rgba(21,101,192,0.18);--ao-soft:rgba(21,101,192,0.55);
  --fg:#f4f5f7;--muted:#8a93a6;
  --glass:rgba(10,18,40,0.6);
  --content-bg:var(--ks-canvas,#F4F6FB);
  --kc-chrome-accent:var(--ks-band-accent,var(--gold));
  --kc-chrome-accent-dim:color-mix(in oklab,var(--kc-chrome-accent) 22%,transparent);
  min-height:100vh;display:flex;flex-direction:column;
  background:var(--content-bg);
}