/* Lobby screen v2 — the wall.
 *
 * Built for a Raspberry Pi 4 running Chromium WITHOUT GPU acceleration (the
 * GPU flags hard-crash its vc4 driver — HANDOVER.md). Everything that repaints
 * per frame on the CPU is therefore banned here: no backdrop-filter, no CSS
 * filter on the <video>, no box-shadow blur that animates, no infinite
 * animations. The card fades in once with opacity/transform and holds still.
 */
:root {
  --bg: #0a0a0f;
  --accent: #ff6a00;
  --ink: #f5f3ef;
  --ink-soft: #b9b4ac;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  width: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  overflow: hidden;
  cursor: none;
}

/* The whole screen, turned for a TV hung on its side. Same geometry as the old
   screen: the box is 100vh × 100vw rotated about its centre, so everything
   inside measures itself as a portrait screen. */
#frame { position: fixed; inset: 0; overflow: hidden; }
/* Copied from the old screen's .screen-frame, which was right: rotate about
   the TOP-LEFT corner and park that corner where the turned box lands exactly
   on the viewport. ('inset: auto' must come BEFORE top/left — written after,
   it resets them and the frame slides off the glass.) */
#frame.portrait, #frame.portrait-flipped {
  inset: auto;
  width: 100vh; height: 100vw;
  transform-origin: 0 0;
}
#frame.portrait { top: 0; left: 100vw; transform: rotate(90deg); }
#frame.portrait-flipped { top: 100vh; left: 0; transform: rotate(-90deg); }

#stage {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: #000;
}
/* Same rule as the old screen: an ad of the screen's own shape FILLS it
   (cover); one of the other shape is shown whole (contain) instead of
   cropped to a slice of its middle. app.js sets the class per video. */
#player { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
#player.contain { object-fit: contain; }

#idle {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--bg);
}
.idle-mark { font-size: 3vmin; letter-spacing: .5em; text-transform: uppercase; color: var(--ink-soft); }
.idle-clock { margin-top: 2vmin; font-size: 12vmin; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- greeting card ---- */
#overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 6, 10, .86);
  z-index: 50;
  opacity: 1;
  transition: opacity .4s ease;
}
#overlay.hidden { opacity: 0; pointer-events: none; }

.card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 5vmin 6vmin;
  max-width: 90%;
}
#overlay:not(.hidden) .card { animation: pop .5s cubic-bezier(.16, 1, .3, 1); }
@keyframes pop {
  from { transform: translateY(3vmin) scale(.96); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.photo-wrap {
  width: 40vmin; height: 40vmin;
  border-radius: 50%; overflow: hidden;
  border: .8vmin solid var(--accent);
  background: #1b1b22;
}
.photo-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ov-greeting { margin-top: 4vmin; font-size: 3.4vmin; color: var(--accent); font-weight: 600; letter-spacing: .04em; }
.ov-name { margin-top: 1vmin; font-size: 7vmin; font-weight: 800; line-height: 1.05; }
.ov-meta { margin-top: 1.6vmin; font-size: 2.6vmin; color: var(--ink-soft); }
.ov-meta:empty { display: none; }
.card.birthday .ov-greeting { font-size: 4.2vmin; }

/* ---- device gate ---- */
#gate {
  position: absolute; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); cursor: default;
}
.gate-box { width: min(560px, 90%); }
.gate-kicker { color: var(--accent); text-transform: uppercase; letter-spacing: .3em; font-size: 13px; }
#gate h1 { font-size: 34px; margin: 12px 0 10px; }
#gate p { color: var(--ink-soft); line-height: 1.5; font-size: 17px; }
#gate form { display: flex; gap: 10px; margin-top: 22px; }
#gate input {
  flex: 1; font: inherit; font-size: 18px; color: var(--ink);
  background: transparent; border: 0; border-bottom: 2px solid var(--accent);
  padding: 10px 2px; outline: none;
}
#gate button {
  font: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
  background: var(--accent); color: #111; border: 0; border-radius: 999px; padding: 10px 22px;
}
#gate button:disabled { opacity: .5; }
#gate.waiting form { display: none; }
.gate-id { margin-top: 18px; font-size: 13px; color: var(--ink-soft); opacity: .7; font-family: ui-monospace, monospace; }

.hidden { display: none !important; }
#overlay.hidden { display: flex !important; }

.status {
  position: absolute; top: 1.6vmin; right: 1.6vmin; z-index: 60;
  font-size: 1.4vmin; color: #e2554e; opacity: .45;
}
.status.live { color: #4fd18b; }