* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { width: 100%; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(1rem, env(safe-area-inset-top)) 1rem
           max(1rem, env(safe-area-inset-bottom)) 1rem;
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
  color: #f8fafc;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
}

body::before, body::after {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  filter: blur(80px);
  z-index: -1;
  opacity: 0.5;
  animation: drift 20s infinite alternate ease-in-out;
}
body::before { background: #4f46e5; top: -50px; left: -50px; }
body::after { background: #0ea5e9; bottom: -50px; right: -50px; animation-delay: -10s; }

@keyframes drift {
  0% { transform: translate(0, 0); }
  100% { transform: translate(50px, 50px); }
}

.container {
  text-align: center;
  padding: 3rem 2rem;
  width: 100%;
  max-width: 420px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

h1 { margin-bottom: 2.5rem; line-height: 1.4; }

.title-main {
  font-size: 1.8rem;
  font-weight: 700;
  background: linear-gradient(to right, #60a5fa, #c084fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
  margin-bottom: 0.5rem;
}

.title-verse {
  font-size: 0.85rem;
  font-weight: 300;
  color: #94a3b8;
  display: block;
  margin-bottom: 1rem;
  font-style: italic;
  min-height: 3em;
}

.title-sub {
  font-size: 1.1rem;
  font-weight: 600;
  color: #e2e8f0;
  display: block;
}

/* Gate button */
#gateBtn {
  padding: 1.2rem 3rem;
  font-size: 1.2rem;
  font-weight: 700;
  font-family: inherit;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  background: linear-gradient(135deg, #3b82f6, #4f46e5);
  color: #fff;
  box-shadow: 0 4px 14px 0 rgba(79, 70, 229, 0.39);
  transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-top: 1rem;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}

/* Hold-to-open progress fill */
#gateBtn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--progress, 0%);
  background: rgba(255, 255, 255, 0.28);
  border-radius: inherit;
  pointer-events: none;
  transition: width 0.05s linear;
}

/* Gloss sheen on hover */
#gateBtn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: inherit;
  pointer-events: none;
}

#gateBtn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(79, 70, 229, 0.5); }
#gateBtn:hover:not(:disabled)::after { opacity: 1; }

#gateBtn:disabled {
  background: #334155;
  color: #94a3b8;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.7;
}

#gateBtn.success {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 4px 14px 0 rgba(16, 185, 129, 0.39);
}

#gateBtn.error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 4px 14px 0 rgba(239, 68, 68, 0.39);
}

.hint {
  margin-top: 0.6rem;
  font-size: 0.75rem;
  color: #475569;
}

/* Status indicator */
#status {
  margin-top: 2rem;
  font-size: 0.95rem;
  color: #cbd5e1;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dot.connected    { background: #10b981; box-shadow: 0 0 8px #10b981; }
.dot.disconnected { background: #ef4444; box-shadow: 0 0 8px #ef4444; }
.dot.connecting   { background: #f59e0b; box-shadow: 0 0 8px #f59e0b; animation: pulse 1.5s infinite ease-in-out; }

@keyframes pulse {
  0%   { transform: scale(0.8); opacity: 0.5; }
  50%  { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(0.8); opacity: 0.5; }
}

/* PIN overlay */
#pinOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

#pinOverlay.hidden { display: none; }

.pin-box {
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  width: 90%;
  max-width: 340px;
  text-align: center;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
}

.pin-box h2 {
  font-size: 1.3rem;
  font-weight: 700;
  color: #e2e8f0;
  margin-bottom: 0.4rem;
}

.pin-box p {
  font-size: 0.88rem;
  color: #64748b;
  margin-bottom: 1.6rem;
}

#pinInput {
  width: 100%;
  padding: 0.9rem 1.2rem;
  font-size: 1.3rem;
  letter-spacing: 0.4em;
  text-align: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #f8fafc;
  font-family: inherit;
  outline: none;
  margin-bottom: 0.6rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

#pinInput:focus {
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.25);
}

#pinError {
  font-size: 0.8rem;
  color: #ef4444;
  min-height: 1.2rem;
  margin-bottom: 0.6rem;
}

#pinSubmit {
  width: 100%;
  padding: 0.9rem;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  background: linear-gradient(135deg, #3b82f6, #4f46e5);
  color: #fff;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: opacity 0.2s;
}

#pinSubmit:hover:not(:disabled) { opacity: 0.9; }
#pinSubmit:disabled { opacity: 0.5; cursor: not-allowed; }