:root { color-scheme: dark; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; min-height: 100dvh; background: #0b1220; color: #e5e7eb;
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: calc(env(safe-area-inset-top) + 8px) 16px env(safe-area-inset-bottom);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
h1 { font-size: 20px; margin: 10px 0 0; text-align: center; }
.sub { color: #94a3b8; font-size: 14px; text-align: center; margin: -6px 0 0; }
.stage {
  width: 100%; max-width: 460px; aspect-ratio: 3/4; background: #000;
  border-radius: 16px; overflow: hidden; position: relative; border: 1px solid #1f2937;
}
.stage video, .stage img { width: 100%; height: 100%; object-fit: cover; display: none; }
.overlay {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  flex-direction: column; text-align: center; padding: 20px;
}
.count { font-size: 110px; font-weight: 800; color: #fff; text-shadow: 0 4px 30px rgba(0,0,0,.6); background: rgba(0,0,0,.18); }
.count small { font-size: 15px; font-weight: 600; color: #cbd5e1; margin-top: -10px; }
.msg { color: #94a3b8; font-size: 15px; }
.big { font-size: 64px; }
button {
  width: 100%; max-width: 460px; border: 0; border-radius: 14px; padding: 16px;
  font-size: 17px; font-weight: 700; color: #fff; background: #16a34a; cursor: pointer;
}
button.sec { background: #1f2937; }
button.warn { background: #b45309; }
button:disabled { opacity: .5; }
.pill {
  width: 100%; max-width: 460px; border-radius: 12px; padding: 10px 14px;
  font-size: 13px; font-weight: 600; text-align: center;
}
.pill.ok { background: #052e1a; color: #4ade80; border: 1px solid #166534; }
.pill.warn { background: #2a1006; color: #fdba74; border: 1px solid #9a3412; }
.pill.info { background: #0c1a33; color: #93c5fd; border: 1px solid #1e3a8a; }
.hide { display: none !important; }
.foot { color: #475569; font-size: 12px; text-align: center; max-width: 460px; margin: auto 0 16px; }
/* kiosk grid */
.grid {
  width: 100%; max-width: 900px; display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.tile {
  background: #0f172a; border: 1px solid #1e293b; border-radius: 16px; padding: 10px;
  display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer;
}
.tile img, .tile .noface {
  width: 110px; height: 110px; border-radius: 50%; object-fit: cover;
  background: #1e293b; display: flex; align-items: center; justify-content: center;
  font-size: 40px; color: #475569;
}
.tile .nm { font-size: 16px; font-weight: 700; text-align: center; }
.tile .st { font-size: 12px; color: #94a3b8; }
.tile.done { opacity: .45; }