/* Brand colour tokens — edit here to retheme the entire site */
:root {
  --color-bg:           #080d1e; /* deep navy — page background and canvas base */
  --color-brand-blue:   #1a4fa0; /* JMSS blue — footer gradient ends */
  --color-brand-mid:    #2563b8; /* JMSS blue lighter — footer gradient centre */
  --color-step-heading: #a7d8f5; /* light aqua — numbered step headings */
  --color-link:         #69c0ff; /* bright sky blue — inline links */
}

/* Remove default browser spacing and make all elements include padding/border in their size */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* Fill the entire viewport, hide scrollbars (this is a full-screen signage display),
   set the dark navy background shown before the canvas loads, and prevent text selection */
html, body {
  width: 100%; height: 100%; overflow: hidden;
  background-color: var(--color-bg); font-family: 'Roboto', sans-serif;
  color: #ffffff; user-select: none;
}

/* The animated canvas sits behind all other content.
   z-index: 0 means it renders beneath the #app overlay. */
#bg-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }

/* Main layout container — sits above the canvas (z-index: 1).
   A 3-row CSS grid: top banner / flexible middle / footer.
   Row sizes are set at runtime via CSS custom properties so they scale with screen height. */
#app {
  position: relative; z-index: 1; display: grid;
  grid-template-rows: var(--header-height) 1fr var(--footer-height);
  height: 100vh; width: 100vw;
}

/* Top reminder banner — centred text in a semi-transparent dark strip.
   Font size is proportional to the header height (set by JS) so it always fits.
   The red-ish colour (rgba 230,87,87) is intentionally attention-grabbing. */
#reminder {
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 0 20px; font-size: calc(var(--header-height) * 0.35); font-weight: 400;
  letter-spacing: 0.02em; color: rgba(230, 87, 87, 0.92);
  background: rgba(0, 0, 0, 0.5); border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Middle section — vertically and horizontally centres the clock and instructions panel.
   gap: 3vh adds proportional breathing room between the two stacked elements. */
#content {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3vh; padding: 20px;
}

/* Stacks the date above the time, centred */
#clock-container { display: flex; flex-direction: column; align-items: center; gap: 0.1em; }

/* clamp(min, preferred, max) makes the font fluid — scales with viewport width
   but never goes below 32px or above 120px */
#date-display { font-size: clamp(32px, 5.5vw, 120px); font-weight: 400; letter-spacing: 0.03em; }

/* tabular-nums prevents the clock from jittering as digits change width */
#time-display {
  font-size: clamp(48px, 8vw, 200px); font-weight: 400; letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

/* Footer bar — semi-transparent JMSS blue gradient with frosted-glass blur,
   matching the translucent treatment of the reminder banner at the top */
#footer {
  position: relative;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.432)  0%, rgba(8, 25, 49, 0.493) 50%, rgba(1, 9, 20, 0.021) 100%);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-top: 1px solid rgba(255, 255, 255, 0.08); /* mirrors the reminder bar's bottom separator */
}

/* Logo floats above the footer bar (translateY(-100%) lifts it up by its own height).
   Positioned absolutely so it doesn't affect footer height. */
#logo-container {
  position: absolute; top: 0; left: 28px; transform: translateY(-100%);
  padding-bottom: 16px; display: flex; align-items: center; gap: 14px; opacity: 0.9;
}
#logo-container img { height: clamp(60px, 8vw, 100px); width: auto; }

/* Frosted-glass card that holds either the Vivi text steps or a room image.
   backdrop-filter blurs whatever is behind the element for the glass effect. */
#instructions-container {
  background: rgba(10, 21, 51, 0.7);
  border: 1px solid rgba(65, 182, 230, 0.15);
  border-radius: 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px); /* Safari prefix */
}

/* Makes images inside the card fill the card width and maintain their aspect ratio.
   display: block removes the default inline bottom gap browsers add to images. */
#instructions-container img { width: 100%; height: auto; display: block; }

/* Text-mode: used on screens with written step-by-step instructions (e.g. Vivi screen) */
#instructions-container.text-mode { padding: 1vw 2vw; max-width: 80ch; }

/* Image-mode: used on screens where a single diagram image fills the card */
#instructions-container.image-mode { padding: 1vw; width: 45%; max-width: 450px; }

/* Card heading (used on the Vivi text-steps screen) */
#instructions-container h2 {
  font-size: clamp(1.2rem, 2vw, 1.5rem); text-align: center; font-weight: 400;
  margin-bottom: 0.8em; letter-spacing: 0.04em;
}

/* Each numbered step — adds spacing below, except for the last one */
.step { margin-bottom: 0.8em; }
.step:last-child { margin-bottom: 0; }

/* Step heading in light blue — stands out against the white body text */
.step h3 { font-size: clamp(1rem, 1.5vw, 1.2rem); font-weight: 700; margin-bottom: 0.2em; color: var(--color-step-heading); }

/* Step body copy — light weight for visual contrast with the bold heading */
.step p { font-size: clamp(0.9rem, 1.2vw, 1rem); font-weight: 300; line-height: 1.5; padding-left: 0.5em; }
.step p strong { font-weight: 400; color: #fff; } /* Highlighted terms inside a step */
.step a { color: var(--color-link); text-decoration: none; }
.step a:hover { text-decoration: underline; }