/* ==========================================================================
   Lobby screen — National Day 96
   Authored at a literal 1920x1080 and scaled to the real display by JS
   (see screen.js -> fitStage). Keeping the design's own pixel numbers means
   no conversion step and no drift from the approved layout.
   ========================================================================== */

/* ------------------------------------------------------------ fonts
   Century Gothic carries Latin, GE Flow carries Arabic. They are listed
   together on body and the browser picks per character. Only 400 and 700
   exist — never ask for a weight we do not ship. */

@font-face {
  font-family: 'Century Gothic';
  src: url('../fonts/CenturyGothic-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Century Gothic';
  src: url('../fonts/CenturyGothic-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'GE Flow';
  src: url('../fonts/GE-Flow-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'GE Flow';
  src: url('../fonts/GE-Flow-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ------------------------------------------------------------ tokens
   Every colour in this file comes from here. Switching a palette is one
   data-bg attribute, not a hunt through eighty literals.

   Each background gets a matching accent. Hues were measured from the
   artwork itself, then pulled toward the National Day palette — the
   measured dominant of bg-02 is pink (red sadu threads) and of bg-05 is
   orange, neither of which belongs on this screen. */

:root {
  --ink:          #ffffff;
  --ink-soft:     rgba(255, 255, 255, .65);
  --ink-faint:    rgba(255, 255, 255, .45);
  --hairline:     rgba(255, 255, 255, .14);
  --chip-bg:      rgba(255, 255, 255, .07);

  /* default: deep green + gold, matching bg-06 */
  --accent:       #e8c451;
  --accent-soft:  rgba(232, 196, 81, .30);
  --panel-bg:     rgba(6, 32, 24, .40);
  --panel-border: rgba(232, 196, 81, .32);
  --screen-bg:    #06201a;
  --backdrop:     linear-gradient(180deg,
                    rgba(4, 22, 17, .70),
                    rgba(4, 22, 17, .12) 40%,
                    rgba(3, 16, 12, .86));
}

/* --- per-background palettes, applied by screen.js --- */

[data-bg='bg-01'], [data-bg='bg-06'] {          /* deep green, gold */
  --accent: #e8c451; --accent-soft: rgba(232, 196, 81, .30);
  --panel-bg: rgba(6, 32, 24, .42); --panel-border: rgba(232, 196, 81, .32);
  --screen-bg: #06201a;
  --backdrop: linear-gradient(180deg, rgba(4,22,17,.70), rgba(4,22,17,.12) 40%, rgba(3,16,12,.86));
}

[data-bg='bg-02'] {                              /* dusk violet-grey */
  --accent: #d9b46a; --accent-soft: rgba(217, 180, 106, .30);
  --panel-bg: rgba(24, 20, 34, .46); --panel-border: rgba(217, 180, 106, .30);
  --screen-bg: #1a1722;
  --backdrop: linear-gradient(180deg, rgba(16,13,22,.74), rgba(16,13,22,.16) 40%, rgba(11,9,16,.88));
}

[data-bg='bg-03'] {                              /* pale sage — the light one */
  --accent: #1f6b42; --accent-soft: rgba(31, 107, 66, .34);
  --panel-bg: rgba(12, 34, 22, .62); --panel-border: rgba(31, 107, 66, .40);
  --screen-bg: #4d5c42;
  /* Darker wash than the rest: this artwork is light and white text needs it. */
  --backdrop: linear-gradient(180deg, rgba(10,26,17,.80), rgba(10,26,17,.52) 40%, rgba(7,20,13,.90));
}

[data-bg='bg-04'] {                              /* forest green medallion */
  --accent: #7ae0a7; --accent-soft: rgba(122, 224, 167, .28);
  --panel-bg: rgba(10, 36, 25, .44); --panel-border: rgba(122, 224, 167, .30);
  --screen-bg: #12291f;
  --backdrop: linear-gradient(180deg, rgba(7,26,18,.70), rgba(7,26,18,.14) 40%, rgba(5,19,13,.86));
}

[data-bg='bg-05'] {                              /* violet sadu */
  --accent: #a09bf5; --accent-soft: rgba(160, 155, 245, .30);
  --panel-bg: rgba(34, 28, 124, .40); --panel-border: rgba(160, 155, 245, .34);
  --screen-bg: #221c7c;
  --backdrop: linear-gradient(180deg, rgba(20,16,78,.72), rgba(20,16,78,.14) 40%, rgba(14,11,60,.88));
}

/* Both screens take their palette from whichever background is showing.
   An earlier version pinned the wall to violet, which clashed once the
   backgrounds started rotating — green artwork with violet accents. */

/* ------------------------------------------------------------ base */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;                 /* clips the cover-scaled stage */
  /* Nobody interacts with a lobby screen; a stray drag must not leave
     text highlighted for the rest of the day. */
  user-select: none;
  -webkit-user-select: none;
  background: #04120e;
  color: var(--ink);
  font-family: 'Century Gothic', 'GE Flow', sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

/* The stage fills the viewport exactly: no letterbox bars, no cropping.
   screen.js sets --unit (type/spacing factor) plus the band sizes; the
   middle row absorbs whatever height is left. */
#stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* The pointer hides itself after a moment of stillness — right for a wall
   display, but it must come back on movement or the screen is impossible
   to work with. screen.js toggles this class. */
body.is-idle { cursor: none; }

/* ------------------------------------------------------------ screens */

.screen {
  position: absolute; inset: 0;
  background-color: var(--screen-bg);
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s ease, background-color 1.2s ease;
}
.screen.is-active { opacity: 1; visibility: visible; }

/* Two stacked layers so one background can cross-fade into the next:
   swapping background-image directly would cut. screen.js paints the idle
   layer, then fades it in and the layers trade roles. */
.bg-layer {
  position: absolute; inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.bg-layer.is-visible { opacity: 1; }

/* Darkens the patterned background so text keeps its contrast. */
.screen::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  background: var(--backdrop);
  transition: background 1.2s ease;
}

.screen-inner {
  position: relative;
  z-index: 2;                       /* above the wash and the images */
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* ------------------------------------------------------------ header */

.screen-header {
  height: var(--header-h, 110px);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(24px * var(--unit, 1));
  padding: 0 calc(34px * var(--unit, 1));
  border-bottom: 1px solid var(--hairline);
}

.header-left  { display: flex; align-items: center; gap: calc(22px * var(--unit, 1)); height: 100%; }
.header-right { display: flex; align-items: center; gap: calc(24px * var(--unit, 1)); height: 100%; }

/* Full-height rules: they divide the header into columns rather than
   floating as short marks. align-self:stretch cannot work here — the
   parent rows centre their children — so the height is set against the
   band itself. */
.divider {
  width: 1px;
  height: var(--header-h, 110px);
  background: rgba(255, 255, 255, .16);
}

.weather { display: flex; align-items: baseline; gap: calc(4px * var(--unit, 1)); }
.weather-temp { font-size: calc(40px * var(--unit, 1)); font-weight: 700; line-height: 1; }
.weather-unit { font-size: calc(17px * var(--unit, 1)); opacity: .65; line-height: 1; }
.weather-meta {
  font-size: calc(11px * var(--unit, 1)); line-height: 1.5;
  letter-spacing: .16em; opacity: .6;
}

.date-block { display: flex; flex-direction: column; }
.date-hijri {
  font-size: calc(19px * var(--unit, 1));
  line-height: 1.25;
}
.date-greg {
  font-size: calc(13px * var(--unit, 1));
  line-height: 1.5;
  opacity: .6;
  /* Tracked out so the Latin line measures close to the Arabic one above
     it — the pair then reads as a single block. */
  letter-spacing: .085em;
}

.clock-block { display: flex; align-items: baseline; gap: calc(12px * var(--unit, 1)); }
.clock { font-size: calc(42px * var(--unit, 1)); font-weight: 700; line-height: 1; }
.clock-city {
  font-size: calc(11px * var(--unit, 1));
  line-height: 1.35;
  letter-spacing: .2em;
  opacity: .55;
  /* City beside the time, not stacked under it. */
  white-space: nowrap;
}

.logo-nd    { height: calc(60px * var(--unit, 1)); width: auto; object-fit: contain; }
.logo-brand { height: calc(46px * var(--unit, 1)); width: auto; object-fit: contain; }

/* ------------------------------------------------------------ body */

.screen-body {
  flex: 1;
  display: flex;
  gap: calc(26px * var(--unit, 1));
  padding: calc(24px * var(--unit, 1)) calc(34px * var(--unit, 1));
  min-height: 0;                    /* lets children scroll-clip, not grow */
}

.panel {
  width: var(--panel-w, 580px);
  flex: none;
  display: flex;
  flex-direction: column;
  gap: calc(14px * var(--unit, 1));
  padding: calc(24px * var(--unit, 1));
  border-radius: calc(14px * var(--unit, 1));
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  backdrop-filter: blur(18px);
}

.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(16px * var(--unit, 1));
}
.panel-title    { font-size: calc(31px * var(--unit, 1)); font-weight: 700; line-height: 1.25; }
.panel-title-en { font-size: calc(18px * var(--unit, 1)); line-height: 1.3; color: var(--accent); }

/* --- journey timeline --- */

.timeline {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;      /* slack collects at the bottom */
  gap: calc(9px * var(--unit, 1));
  flex: 1;
}

.step {
  display: flex;
  gap: calc(16px * var(--unit, 1));
  align-items: stretch;
}

/* Cards rise into place one after another. The stagger is what makes this
   read as deliberate rather than five things twitching at once; journey.js
   sets --i per card and the delay follows from it.
   GPU-friendly properties only (transform + opacity) so the motion stays
   smooth while the video plays alongside. */
.step {
  animation: step-rise .62s cubic-bezier(.22, .78, .30, 1) backwards;
  animation-delay: calc(var(--i, 0) * .085s);
}

@keyframes step-rise {
  from { opacity: 0; transform: translateY(calc(26px * var(--unit, 1))); }
  to   { opacity: 1; transform: translateY(0); }
}

/* The numbered marker lands just after its card. */
.step-num {
  animation: num-pop .5s cubic-bezier(.34, 1.56, .64, 1) backwards;
  animation-delay: calc(var(--i, 0) * .085s + .12s);
}

@keyframes num-pop {
  from { opacity: 0; transform: scale(.55); }
  to   { opacity: 1; transform: scale(1); }
}

/* The connecting rail draws downward behind them. */
.step-line {
  transform-origin: top;
  animation: line-draw .5s ease backwards;
  animation-delay: calc(var(--i, 0) * .085s + .22s);
}

@keyframes line-draw {
  from { transform: scaleY(0); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}

/* Outgoing set: the cards sink and fade together before the next rises. */
.timeline.is-leaving .step {
  animation: step-sink .34s ease forwards;
}

@keyframes step-sink {
  to { opacity: 0; transform: translateY(calc(-14px * var(--unit, 1))); }
}

/* On a screen left running all day, honour a reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  .step, .step-num, .step-line, .timeline.is-leaving .step { animation: none; }
}

.step-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(5px * var(--unit, 1));
  width: calc(40px * var(--unit, 1));
  flex: none;
}
.step-num {
  width: calc(40px * var(--unit, 1)); height: calc(40px * var(--unit, 1));
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--accent-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: calc(18px * var(--unit, 1)); font-weight: 700; line-height: 1;
  color: var(--accent);
}
.step-line { flex: 1; width: 2px; background: var(--accent-soft); }
.step:last-child .step-line { display: none; }

.step-card {
  flex: 1;
  padding: calc(12px * var(--unit, 1)) calc(16px * var(--unit, 1));
  border-radius: calc(8px * var(--unit, 1));
  background: var(--chip-bg);
}
.step-heading { display: flex; align-items: baseline; gap: calc(12px * var(--unit, 1)); }
.step-year     { font-size: calc(23px * var(--unit, 1)); font-weight: 700; line-height: 1; color: var(--accent); }
.step-title    { font-size: calc(19px * var(--unit, 1)); font-weight: 700; line-height: 1.2; }
.step-title-en { font-size: calc(15px * var(--unit, 1)); line-height: 1.2; color: var(--ink-faint); }
.step-text     { font-size: calc(17px * var(--unit, 1)); line-height: 1.45; margin-top: calc(5px * var(--unit, 1)); color: rgba(255,255,255,.8); }
.step-text-en  { font-size: calc(15px * var(--unit, 1)); line-height: 1.4; margin-top: calc(3px * var(--unit, 1)); color: var(--ink-faint); }

/* --- video --- */

.stage-video {
  flex: 1;
  position: relative;
  border-radius: calc(14px * var(--unit, 1));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .15);
  background: #0a1a14;
  min-width: 0;
}
.stage-video video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Shown until a video is configured — mirrors the design's placeholder. */
.video-placeholder {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg,
    #0e2a20, #0e2a20 14px, #123428 14px, #123428 28px);
}

.video-month {
  position: absolute; top: calc(26px * var(--unit, 1)); left: calc(28px * var(--unit, 1));
  font-size: calc(22px * var(--unit, 1)); line-height: 1;
  color: var(--ink-soft);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
}

.video-caption {
  position: absolute; left: calc(22px * var(--unit, 1)); right: calc(22px * var(--unit, 1)); bottom: calc(22px * var(--unit, 1));
  padding: calc(16px * var(--unit, 1)) calc(26px * var(--unit, 1));
  border-radius: calc(8px * var(--unit, 1));
  background: rgba(4, 22, 17, .92);
  backdrop-filter: blur(10px);
  border: 1px solid var(--panel-border);
  text-align: center;
}
.video-caption-ar { font-size: calc(23px * var(--unit, 1)); line-height: 1.45; }
.video-caption-en { font-size: calc(18px * var(--unit, 1)); line-height: 1.4; margin-top: calc(5px * var(--unit, 1)); color: var(--ink-soft); }

/* ------------------------------------------------------------ footer */

.screen-footer {
  height: var(--footer-h, 168px);
  flex: none;
  display: flex;
  align-items: stretch;
  gap: calc(20px * var(--unit, 1));
  padding: calc(16px * var(--unit, 1)) calc(24px * var(--unit, 1));
  border-top: 1px solid var(--hairline);
}

.prayer-next {
  flex: 0 0 calc(250px * var(--unit, 1));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: calc(10px * var(--unit, 1));
  background: rgba(4, 22, 17, .55);
  backdrop-filter: blur(14px);
  border: 1px solid var(--panel-border);
  min-width: 0;
}
.prayer-label {
  font-size: calc(11px * var(--unit, 1)); font-weight: 700; line-height: 1;
  letter-spacing: .22em;
  color: var(--accent);
}
.prayer-name { font-size: calc(22px * var(--unit, 1)); font-weight: 700; line-height: 1.3; margin-top: calc(5px * var(--unit, 1)); }
.prayer-time { font-size: calc(34px * var(--unit, 1)); font-weight: 700; line-height: 1.1; }
.prayer-meta {
  font-size: calc(11px * var(--unit, 1)); line-height: 1.4;
  letter-spacing: .18em; opacity: .45;
}

.events-bar {
  flex: 1;                          /* takes whatever the two cards leave */
  display: flex;
  align-items: stretch;
  border-radius: calc(10px * var(--unit, 1));
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .2);
  min-width: 0;
  overflow: hidden;
}

.qr-block {
  flex: none;
  display: flex;
  align-items: center;
  padding-inline-end: calc(20px * var(--unit, 1));
}
.qr-code {
  width: calc(96px * var(--unit, 1)); height: calc(96px * var(--unit, 1));
  flex: none;
  border-radius: calc(5px * var(--unit, 1));
  background: #fff;
  padding: calc(5px * var(--unit, 1));
}
.qr-code canvas, .qr-code img { width: 100%; height: 100%; display: block; }
.qr-text-ar { font-size: calc(17px * var(--unit, 1)); line-height: 1.35; }
.qr-text-en { font-size: calc(13px * var(--unit, 1)); line-height: 1.35; color: var(--ink-soft); }

.events-list { flex: 1; display: flex; align-items: stretch; min-width: 0; }

.event {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: calc(3px * var(--unit, 1));
  padding: 0 calc(12px * var(--unit, 1));
  border-right: 1px solid rgba(255, 255, 255, .07);
  min-width: 0;
}
.event-name {
  font-size: calc(21px * var(--unit, 1));
  font-weight: 700;
  line-height: 1.25;
  /* Wrap rather than truncate — a clipped event name is worse than a
     slightly taller cell. */
  overflow-wrap: anywhere;
}
.event-name-en {
  font-size: calc(14px * var(--unit, 1));
  line-height: 1.3;
  color: var(--ink-faint);
  overflow-wrap: anywhere;
}
.event-date {
  font-size: calc(19px * var(--unit, 1));
  font-weight: 700;
  line-height: 1.3;
  margin-top: calc(6px * var(--unit, 1));
  color: var(--accent);
}
.event-place {
  font-size: calc(16px * var(--unit, 1));
  line-height: 1.35;
  margin-top: calc(2px * var(--unit, 1));
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.events-empty {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(16px * var(--unit, 1));
  color: var(--ink-faint);
}

.events-title {
  width: calc(230px * var(--unit, 1));
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-inline-start: calc(14px * var(--unit, 1));
  padding-inline-end: calc(24px * var(--unit, 1));
  /* Logical, not physical: the rule belongs on the side facing the event
     list, never between the title and its own QR code. */
  border-inline-end: 1px solid rgba(255, 255, 255, .1);
  text-align: right;
}
.events-title-ar { font-size: calc(21px * var(--unit, 1)); font-weight: 700; line-height: 1.25; }
.events-title-en {
  font-size: calc(12px * var(--unit, 1)); line-height: 1.6;
  letter-spacing: .14em; opacity: .5;
}
.events-date { font-size: calc(11px * var(--unit, 1)); line-height: 1.5; opacity: .45; margin-top: calc(3px * var(--unit, 1)); letter-spacing: .06em; }

/* ------------------------------------------------------------ offline */

/* Shown only when the browser cannot reach our own server. Live data going
   stale is handled server-side and stays invisible to the viewer. */
#offline-badge {
  position: absolute;
  bottom: calc(14px * var(--unit, 1)); left: calc(14px * var(--unit, 1));
  padding: calc(6px * var(--unit, 1)) calc(14px * var(--unit, 1));
  border-radius: calc(6px * var(--unit, 1));
  background: rgba(0, 0, 0, .55);
  border: 1px solid var(--hairline);
  font-size: calc(12px * var(--unit, 1));
  letter-spacing: .12em;
  color: var(--ink-faint);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
#offline-badge.is-visible { opacity: 1; }

/* ------------------------------------------------------ greetings wall */

.wall-list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;      /* slack collects at the bottom */
  gap: calc(11px * var(--unit, 1));
  flex: 1;
  min-height: 0;
  overflow: hidden;                 /* a long message must never spill out */
}

.greeting-card {
  display: flex;
  gap: calc(14px * var(--unit, 1));
  align-items: flex-start;
  padding: calc(14px * var(--unit, 1)) calc(16px * var(--unit, 1));
  border-radius: calc(8px * var(--unit, 1));
  background: var(--chip-bg);
  border-inline-end: 3px solid var(--accent-soft);
  /* Same staggered rise as the timeline, so both screens move alike. */
  animation: step-rise .62s cubic-bezier(.22, .78, .30, 1) backwards;
  animation-delay: calc(var(--i, 0) * .10s);
}

.wall-list.is-leaving .greeting-card {
  animation: step-sink .34s ease forwards;
}

.greeting-avatar {
  width: calc(56px * var(--unit, 1));
  height: calc(56px * var(--unit, 1));
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, .12);
  display: flex; align-items: center; justify-content: center;
  font-size: calc(22px * var(--unit, 1));
  font-weight: 700;
  color: var(--accent);
}
.greeting-avatar img { width: 100%; height: 100%; object-fit: cover; }

.greeting-body { flex: 1; min-width: 0; }

.greeting-card .greeting-name {
  font-size: calc(21px * var(--unit, 1));
  font-weight: 700;
  line-height: 1.3;
}
.greeting-card .greeting-role {
  font-size: calc(15px * var(--unit, 1));
  line-height: 1.35;
  color: var(--ink-faint);
}
.greeting-message {
  font-size: calc(19px * var(--unit, 1));
  line-height: 1.5;
  margin-top: calc(6px * var(--unit, 1));
  /* Cap at three lines: the panel holds three cards and one runaway
     message would push the others off the screen. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Shown until the first greeting is approved. */
.wall-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(10px * var(--unit, 1));
  text-align: center;
  color: var(--ink-faint);
}
.wall-empty-ar { font-size: calc(21px * var(--unit, 1)); }
.wall-empty-en { font-size: calc(15px * var(--unit, 1)); }

/* Greeting call-to-action — first card in the footer, on both screens. */

.greet-cta {
  /* Fixed width: the code must stay large enough to scan across a lobby,
     so this card never shrinks to make room for the others. */
  flex: 0 0 calc(275px * var(--unit, 1));
  display: flex;
  align-items: center;
  gap: calc(14px * var(--unit, 1));
  padding: calc(12px * var(--unit, 1)) calc(18px * var(--unit, 1));
  border-radius: calc(10px * var(--unit, 1));
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(14px);
  border: 1px solid var(--panel-border);
}
.greet-cta .qr-code {
  width: calc(96px * var(--unit, 1));
  height: calc(96px * var(--unit, 1));
  flex: none;
}
.greet-cta-text { min-width: 0; }
.greet-cta-ar {
  font-size: calc(19px * var(--unit, 1));
  font-weight: 700;
  line-height: 1.3;
}
.greet-cta-en {
  font-size: calc(13px * var(--unit, 1));
  line-height: 1.35;
  color: var(--ink-faint);
  margin-top: calc(2px * var(--unit, 1));
}

/* Page indicator: one dot per page of greetings. */
.wall-dots {
  display: flex;
  justify-content: center;
  gap: calc(7px * var(--unit, 1));
  flex: none;
  padding-top: calc(4px * var(--unit, 1));
}
.wall-dot {
  width: calc(7px * var(--unit, 1));
  height: calc(7px * var(--unit, 1));
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  transition: background .3s ease, transform .3s ease;
}
.wall-dot.is-active { background: var(--accent); transform: scale(1.3); }

/* ------------------------------------------------- screen transition */

/* A brief image or video between the two screens, so the swap reads as
   deliberate rather than a jump cut. Sits above everything on the stage. */
.transition {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: #04120e;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
}
.transition.is-visible { opacity: 1; }
.transition[hidden] { display: none !important; }

.transition-media {
  width: 100%;
  height: 100%;
  object-fit: cover;              /* fill the wall, never letterbox */
  display: block;
}
.transition-media[hidden] { display: none !important; }