/* kiosk.<domain> pairing lobby — a screen shows its 4-digit code until the DJ claims it. */
:root { --accent: #6c63ff; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: radial-gradient(1200px 700px at 50% -10%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 60%), #0b0b14;
  color: #f1f5f9; -webkit-font-smoothing: antialiased;
}
.kk-boot { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
.kk-spinner { width: 46px; height: 46px; border-radius: 50%; border: 4px solid rgba(255,255,255,0.15);
  border-top-color: var(--accent); animation: kkSpin 0.9s linear infinite; }
@keyframes kkSpin { to { transform: rotate(360deg); } }

.kk-pair { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.2rem; text-align: center; padding: 2rem; }
.kk-logo { max-height: 92px; max-width: 60%; margin-bottom: 0.4rem; }
.kk-label { text-transform: uppercase; letter-spacing: 0.28em; font-size: clamp(0.8rem, 1.6vw, 1rem); color: #94a3b8; font-weight: 700; }
.kk-code { font-size: clamp(4rem, 18vw, 12rem); font-weight: 800; letter-spacing: 0.14em; line-height: 1; font-variant-numeric: tabular-nums;
  color: #fff; text-shadow: 0 0 40px color-mix(in srgb, var(--accent) 55%, transparent); }
.kk-code.kk-dim { opacity: 0.35; }
.kk-wait { display: inline-flex; align-items: center; gap: 0.6rem; font-size: clamp(1rem, 2.4vw, 1.5rem); color: #cbd5e1; }
.kk-dot { width: 14px; height: 14px; border-radius: 50%; background: #22c55e; animation: kkPulse 1.4s ease-in-out infinite; }
.kk-dot.kk-off { background: #ef4444; animation: none; }
@keyframes kkPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
.kk-hint { max-width: 640px; color: #7c8598; font-size: clamp(0.85rem, 1.8vw, 1.05rem); line-height: 1.55; }
.kk-name { color: var(--accent); font-weight: 700; }