/* The look every display shares: GuestPass's own dark palette, sized in viewport units for a 16:9
   touchscreen. Plain on purpose; the animations do the work. */
:root {
  --bg: #0f0f0f;
  --surface: rgba(255, 255, 255, 0.05);
  --surface-hover: rgba(255, 255, 255, 0.1);
  --surface-strong: #1e293b;
  --text: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-faint: #64748b;
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.2);
  --accent: #e2e8f0;
  --highlight: #059669;
  --success: #059669;
  --error: #dc2626;
  --warning: #d97706;
  --info: #2563eb;
  --radius: 1.2vh;
  --radius-lg: 2vh;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  overflow: hidden;
  user-select: none;
  touch-action: manipulation;
}
body.scrolls { overflow: auto; }

/* ── Screens: one per phase; body[data-phase] decides which shows ───────────── */
.screen { position: absolute; inset: 0; display: none; flex-direction: column; }
body[data-phase="idle"] .screen[data-screen="idle"],
body[data-phase="playing"] .screen[data-screen="playing"],
body[data-phase="browsing"] .screen[data-screen="browsing"],
body[data-phase="result"] .screen[data-screen="result"] { display: flex; }

/* ── The header: who is playing ──────────────────────────────────────────────── */
.header {
  display: flex;
  align-items: center;
  gap: 2.2vh;
  padding: 2.6vh 4vw;
  min-height: 12vh;
}
.header .avatar {
  width: 8.5vh; height: 8.5vh;
  border-radius: 50%;
  background: var(--surface-strong);
  display: grid; place-items: center;
  font-weight: 700; font-size: 3.2vh; color: var(--text-secondary);
  overflow: hidden; flex: none;
  box-shadow: 0 0 0 0.5vh var(--border-strong);
}
.header .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.header .who { min-width: 0; }
.header .verb { font-size: 2vh; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.2em; }
.header .name { font-size: 4vh; font-weight: 700; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header .meta { font-size: 2.3vh; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header .right { margin-left: auto; text-align: right; }

/* ── The idle screen: the logo, the title, tap to start ──────────────────────── */
.idle {
  align-items: center; justify-content: center; text-align: center;
  gap: 3vh;
}
.logo-stage { position: relative; width: 34vh; height: 34vh; display: grid; place-items: center; }
.logo-stage .halo {
  position: absolute; inset: 0; border-radius: 50%;
  border: 0.4vh solid var(--border-strong);
  animation: halo 2.8s ease-out infinite;
}
.logo-stage .halo.late { animation-delay: 1.4s; }
.logo-stage .orbit {
  position: absolute; inset: 2vh; border-radius: 50%;
  border: 0.3vh solid transparent;
  border-top-color: var(--highlight);
  border-right-color: var(--info);
  animation: orbit 3.6s linear infinite;
  filter: drop-shadow(0 0 1.2vh rgba(5, 150, 105, 0.6));
}
.logo-stage .logo {
  width: 22vh; height: 22vh; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface);
  animation: breathe 2.8s ease-in-out infinite;
}
.logo-stage .logo img { max-width: 76%; max-height: 76%; object-fit: contain; }
.logo-stage .logo .mark { font-size: 7vh; font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
@keyframes halo { 0% { transform: scale(0.62); opacity: 0.9; } 100% { transform: scale(1.25); opacity: 0; } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }

.title { font-size: 8vh; font-weight: 800; letter-spacing: -0.02em; line-height: 1; margin: 0; }
.subtitle { font-size: 3vh; color: var(--text-muted); margin: 0; max-width: 70vw; }
.cta {
  margin-top: 2vh;
  font-size: 3.4vh; font-weight: 600;
  padding: 2vh 4.5vw; border-radius: 99vh;
  border: 0.3vh solid var(--border-strong);
  animation: cta 1.8s ease-in-out infinite;
}
@keyframes cta { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
.community { position: absolute; bottom: 3vh; font-size: 2vh; color: var(--text-faint); letter-spacing: 0.15em; text-transform: uppercase; }

/* ── The countdown ring ──────────────────────────────────────────────────────── */
.ring { position: relative; width: 12vh; height: 12vh; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .track { fill: none; stroke: var(--border-strong); stroke-width: 7; }
.ring .arc { fill: none; stroke: var(--highlight); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 100 100; transition: stroke 0.3s; }
.ring.late .arc { stroke: var(--warning); }
.ring.last .arc { stroke: var(--error); }
.ring .num { position: absolute; inset: 0; display: grid; place-items: center; font-size: 4.2vh; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Result ──────────────────────────────────────────────────────────────────── */
.result-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vh; text-align: center; }
.big-number { font-size: 22vh; font-weight: 800; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.big-label { font-size: 3vh; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.2em; }
.submission { display: inline-flex; align-items: center; gap: 1.2vh; font-size: 2.6vh; color: var(--text-secondary); margin-top: 2vh; }
.submission .mark { width: 1.8vh; height: 1.8vh; border-radius: 50%; background: var(--text-faint); }
.submission[data-status="recorded"] .mark { background: var(--success); box-shadow: 0 0 1.2vh var(--success); }
.submission[data-status="failed"] .mark { background: var(--error); }
.submission[data-status="pending"] .mark { animation: cta 1s ease-in-out infinite; }

/* ── Bits ────────────────────────────────────────────────────────────────────── */
.kicker { font-size: 2.2vh; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.2em; }
.btn {
  font: inherit; color: var(--text); background: var(--surface); border: 0.25vh solid var(--border-strong);
  border-radius: var(--radius); padding: 1.8vh 3vw; font-size: 2.8vh; font-weight: 600; cursor: pointer;
}
.btn:active { background: var(--surface-hover); }
.flash { position: fixed; inset: 0; background: var(--error); opacity: 0; pointer-events: none; z-index: 50; }
.flash.on { opacity: 0.92; }
.offline {
  position: fixed; top: 2vh; left: 50%; transform: translateX(-50%);
  background: var(--error); color: #fff; padding: 1vh 2vw; border-radius: 99vh; font-size: 2vh; z-index: 60;
}
[hidden] { display: none !important; }