/* ============================================================
   "Closed for now" landing screen: animated construction site with the
   countdown hung over the middle (the scenery itself is drawn by
   js/construct.js).
   ============================================================ */
#screen-construct {
  gap: 0.6rem;
  justify-content: safe center;
}

.site-head { position: relative; z-index: 2; text-align: center; }

.site-title {
  margin: 0;
  font-size: clamp(2rem, 6vw, 3.6rem);
  line-height: 1.1;
  background: linear-gradient(100deg, #ff7a3d 0%, #f2559c 50%, #9566ee 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 8px rgba(255, 126, 182, 0.28));
}

.site-sub {
  margin: 0.15rem 0 0;
  font-size: clamp(1rem, 2.6vw, 1.45rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--plum);
}

/* the scene; sized in container units so the sign scales with it */
.site-stage {
  position: relative;
  width: min(96vw, 1100px);
  aspect-ratio: 1000 / 560;
  container-type: inline-size;
  z-index: 1;
}

.site-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* the countdown, hung over the building like a site sign */
.site-timer {
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  padding: 1.1cqw;
  border-radius: 2.4cqw;
  background: repeating-linear-gradient(45deg, #ffd36e 0 1.6cqw, #3d3347 1.6cqw 3.2cqw);
  box-shadow: 0 1.2cqw 3cqw rgba(61, 51, 71, 0.35);
  z-index: 3;
}

.site-timer-inner {
  border-radius: 1.6cqw;
  background: rgba(255, 252, 246, 0.95);
  padding: 1.4cqw 2.6cqw 1.6cqw;
  text-align: center;
}

.site-timer-label {
  margin: 0 0 0.9cqw;
  font-size: 1.55cqw;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--plum);
}

.site-timer-units {
  display: flex;
  justify-content: center;
  gap: 1.3cqw;
}

.site-unit {
  min-width: 8.4cqw;
  padding: 0.7cqw 1cqw 0.6cqw;
  border-radius: 1.5cqw;
  background: #3d3347;
  color: #ffe28a;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.site-num {
  font-family: "Pacifico", cursive;
  font-size: 4.6cqw;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.site-cap {
  font-size: 1.15cqw;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffd9b8;
}

/* top-right "site access" button */
.site-key-btn {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 5;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(4px);
}

/* 8-digit PIN boxes (a separate class from the Update Logs PIN) */
.site-pin-boxes {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin: 0.4rem 0 0.9rem;
}

.site-pin-box {
  width: 34px;
  height: 46px;
  border: 2px solid var(--purple-soft);
  border-radius: 10px;
  text-align: center;
  font-family: 'Quicksand', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--plum);
  background: white;
  outline: none;
  transition: border-color 0.15s ease;
}

.site-pin-box:focus { border-color: var(--pink); }

.site-pin-card { text-align: center; }
.site-pin-card .cake-btn { margin: 0.2rem auto 0; }

/* phones: the scene is short, so make the sign relatively bigger */
@media (max-width: 640px) {
  /* zoom the scene in a bit so the machines aren't tiny (the faded edges
     spill past the stage, so clip sideways instead of scrolling) */
  #screen-construct { overflow-x: clip; }
  .site-stage { aspect-ratio: 1000 / 640; margin-top: 0.4rem; }
  .site-svg { transform: scale(1.32); transform-origin: 50% 88%; }
  .site-timer { top: 40%; padding: 1.6cqw; border-radius: 3.4cqw; }
  .site-timer-inner { padding: 2cqw 3.4cqw 2.4cqw; border-radius: 2.4cqw; }
  .site-timer-label { font-size: 2.8cqw; margin-bottom: 1.4cqw; }
  .site-timer-units { gap: 2cqw; }
  .site-unit { min-width: 13cqw; border-radius: 2.2cqw; padding: 1cqw 1.4cqw; }
  .site-num { font-size: 7.4cqw; }
  .site-cap { font-size: 2cqw; }
  .site-key-btn { top: 0.9rem; right: 0.9rem; }
}

@media (max-width: 400px) {
  .site-pin-box { width: 29px; height: 42px; font-size: 1.1rem; }
  .site-pin-boxes { gap: 0.3rem; }
}