/*-------------------------
	Fonts: OMEGA CT, as in OMEGA's own banner build (Regular for title and numbers, Light for labels)
--------------------------*/

@font-face {
  font-family: 'OMEGACT';
  src: url('OMEGACT-Regular.woff2') format('woff2'),
    url('OMEGACT-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'OMEGACT';
  src: url('OMEGACT-Light.woff2') format('woff2'),
    url('OMEGACT-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/*-------------------------
	Themes (data-bg = red | white)
--------------------------*/

html[data-bg="red"] {
  --bg: #c32030;
  --fg: #ffffff;
  --logo: #ffffff;
  --radius: 12px;
}

html[data-bg="white"] {
  --bg: #f6f4f6;
  --fg: #d50027;
  --logo: #c00022;
  --radius: 16px;
}

/*-------------------------
	Base
--------------------------*/

* {
  box-sizing: border-box;
}

html,
body,
p {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  overflow: hidden;
  background: transparent;
}

/* Full-width bar (mobile / inline): the whole frame takes the background */
html[data-mode="bar"] body {
  background: var(--bg);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/*-------------------------
	Banner (Figma "Widget anatomy", with the logo size from OMEGA's build):
	  tab (desktop/tablet): 416 x 72  | 12 | logo 74 | 8 | watch 72      | 8  | text 230 | 12 |
	  bar (mobile):         375 x 80  | 21 | logo 74 | 8 | watch 79 x 80 | 24 | text 145 | 24 |
	  The logo is 74 x 36 in both, as in OMEGA's build (Figma: 19px logo-watch gap on mobile, reduced
	  to 8px to make room for it).
--------------------------*/

.banner {
  position: relative;
  display: flex;
  align-items: center;
  width: 375px;
  height: 80px;
  margin: 0 auto;
  padding: 0 24px 0 21px;
  color: var(--fg);
  background: var(--bg);
}

html[data-mode="tab"] .banner {
  width: 416px;
  height: 72px;
  padding: 0 12px;
  border-radius: 0 0 var(--radius) var(--radius);
}

/* Concave fillets joining the header. 9px wide: the extra 1px overlaps the banner so no seam
   shows at fractional zoom (125%, 150%) */
html[data-mode="tab"] .banner::before,
html[data-mode="tab"] .banner::after {
  content: '';
  position: absolute;
  top: 0;
  width: 9px;
  height: 8px;
}

html[data-mode="tab"] .banner::before {
  left: -8px;
  background: radial-gradient(circle at 0 100%, transparent 7.5px, var(--bg) 8px);
}

html[data-mode="tab"] .banner::after {
  right: -8px;
  background: radial-gradient(circle at 100% 100%, transparent 7.5px, var(--bg) 8px);
}

.logo {
  flex: none;
  width: 74px;
  height: 36px;
  margin-right: 8px;
  fill: var(--logo);
}

/*-------------------------
	Watch: a window onto a larger watch image.
	  tab: size and offsets as in Figma
	  bar: as in OMEGA's mobile build, 140px with the dial 34px from the top, so the bracelet shows below it
	Hands as in v1 config(): hand box = 0.96 * 0.34 of the watch, sub-dials 24/270 of the watch off centre
--------------------------*/

.watch {
  --s: 140px;
  --x: -30.5px;
  --y: -36px;
  position: relative;
  flex: none;
  width: 79px;
  height: 80px;
  margin-right: 24px;
  overflow: hidden;
}

html[data-mode="tab"] .watch {
  --s: 150px;
  --x: -41px;
  --y: -41px;
  width: 72px;
  height: 72px;
  margin-right: 8px;
}

.stage {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--s);
  height: var(--s);
}

.face {
  display: block;
  width: 100%;
  height: 100%;
}

.hand {
  --h: calc(var(--s) * 0.3264);
  --dx: 0px;
  --dy: 0px;
  position: absolute;
  top: calc(50% - var(--h) / 2 + var(--dy));
  left: calc(50% - var(--h) / 2 + var(--dx));
  width: var(--h);
  height: var(--h);
  will-change: transform;
}

.sub-left {
  --dx: calc(var(--s) * -24 / 270);
}

.sub-right {
  --dx: calc(var(--s) * 24 / 270);
}

.sub-bottom {
  --dy: calc(var(--s) * 24 / 270);
}

/*-------------------------
	Title + countdown
	  type as in OMEGA's build: OMEGA CT Regular 12.5px (title, numbers), Light 12px desktop / 11px mobile
	  (labels), 0.5px letter spacing on the title and labels
	  countdown as in OMEGA's build: 22px columns 16px apart (136px), longer labels overflow centred
	  tab: title on one line 8px from the top, 3px gap
	  bar: title up to 2 lines, numbers and labels 4px tighter
--------------------------*/

.info {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  justify-content: center;
  min-width: 0;
  text-align: center;
  text-transform: uppercase;
}

html[data-mode="tab"] .info {
  justify-content: flex-start;
  padding-top: 8px;
}

.title {
  max-width: 156px;
  max-height: 34px;
  overflow: hidden;
  font-family: 'OMEGACT', Arial, sans-serif;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 17px;
  letter-spacing: 0.5px;
}

html[data-mode="tab"] .title {
  max-width: 100%;
  max-height: 17px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.countdown {
  display: flex;
  gap: 16px;
}

html[data-mode="tab"] .countdown {
  margin-top: 3px;
}

.unit {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  width: 22px;
  line-height: 17px;
}

.value {
  margin-bottom: -4px;
  font-family: 'OMEGACT', Arial, sans-serif;
  font-size: 12.5px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.name {
  font-family: 'OMEGACT', Arial, sans-serif;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.5px;
}

html[data-mode="tab"] .value {
  margin-bottom: 0;
}

html[data-mode="tab"] .name {
  font-size: 12px;
}