/* style.css - global, mobile touch first */
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: system-ui, sans-serif;
  background:#0a0a0a;
  color:#eee;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:1rem;
  touch-action:manipulation; /* better touch */
}

header {
  width:100%;
  text-align:center;
  padding:1rem 0;
}

.logo {
  max-width:180px;
  height:auto;
}

main {
  flex:1;
  width:100%;
  max-width:420px; /* phone friendly */
  display:flex;
  flex-direction:column;
  gap:1.5rem;
  align-items:center;
}

.card {
  background:#111;
  border:1px solid #333;
  border-radius:12px;
  padding:1.5rem;
  width:100%;
  text-align:center;
  box-shadow:0 4px 20px rgba(0,0,0,0.6);
}

.btn {
  display:block;
  width:100%;
  padding:1rem;
  margin:0.5rem 0;
  font-size:1.2rem;
  background:#222;
  color:#0ff; /* cyan accent */
  border:2px solid #0ff;
  border-radius:8px;
  cursor:pointer;
  touch-action:manipulation;
}

.btn:active { background:#0ff; color:#000; }

.hidden { display:none; }

video, canvas { width:100%; max-width:100%; border-radius:8px; }