/* loaded after css/style.css — reuses its :root variables, #topbar and header
   styling, but overrides the dark tool-page colors with an all-white page */

html, body {
  background: #ffffff;
  color: #111111;
  /* this whole page is white — the light-bg (black) arrow reads better here
     than style.css's dark-tool-page default */
  cursor: var(--cursor-dark);
}

/* invert the shared dark header to a white one on this page, so it sits flush
   with the all-white content below instead of the dark tool-page chrome */
#topbar {
  background: #ffffff;
  border-bottom: 1px solid #eeeeee;
}

#anniversaryBadge,
#wordmark,
.header-link {
  color: #111111;
}

/* the floating field the greetings drift and bounce around in — fills
   whatever vertical space #topbar leaves within the 100dvh #app flex column,
   so the physics loop has a stable width/height to bounce cards off of
   regardless of the header's (responsive) height */
#gbField {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.gb-card {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  border: none;
  border-radius: 0;
  box-shadow: none;
  will-change: transform;
  /* cards are free to overlap now (no collision push-apart) — multiply keeps
     each card's white background invisible where they cross, so only the
     typography itself layers on top of each other */
  mix-blend-mode: multiply;
}

.gb-empty {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #999999;
  font-size: 14px;
}