/* ============================================================
   CELEBRIFFY FaceID — style.css  ·  sci-fi HUD theme
   ============================================================ */
:root {
  --bg: #05080f;
  --bg2: #0a1220;
  --cyan: #00e5ff;
  --cyan-dim: rgba(0, 229, 255, 0.35);
  --green: #22ff88;
  --red: #ff3b5c;
  --amber: #ffc233;
  --text: #d7f4ff;
  --text-dim: #6f93a8;
  --line: rgba(0, 229, 255, 0.18);
  --mono: 'Consolas', 'SF Mono', 'Cascadia Code', monospace;
}

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

html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  overflow-x: hidden;
  letter-spacing: 0.03em;
}

/* animated grid backdrop */
.grid-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(0, 229, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%);
  animation: gridDrift 24s linear infinite;
}
@keyframes gridDrift { to { background-position: 44px 44px; } }

/* ======================= top bar ======================= */
.topbar {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(0,229,255,0.05), transparent);
  backdrop-filter: blur(6px);
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand-ring {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px dashed var(--cyan);
  animation: spin 9s linear infinite;
  box-shadow: 0 0 14px var(--cyan-dim), inset 0 0 8px var(--cyan-dim);
}
@keyframes spin { to { transform: rotate(360deg); } }
.brand-name { font-size: 15px; font-weight: 700; letter-spacing: 0.18em; }
.brand-name span { color: var(--cyan); }
.brand-tag { font-size: 9.5px; color: var(--text-dim); letter-spacing: 0.22em; margin-top: 2px; }

.stats { display: flex; align-items: center; gap: 18px; }
.stat { display: flex; flex-direction: column; align-items: flex-end; }
.stat label { font-size: 8.5px; color: var(--text-dim); letter-spacing: 0.2em; }
.stat b { font-size: 11.5px; color: var(--cyan); font-weight: 600; }
.stat b.ok { color: var(--green); }
.btn-icon {
  background: none; border: 1px solid var(--line); color: var(--text);
  border-radius: 6px; padding: 6px 9px; cursor: pointer; font-size: 14px;
}
.btn-icon:hover { border-color: var(--cyan); }

/* ======================= screens ======================= */
.screen { display: none; position: relative; z-index: 1; }
.screen.active { display: block; animation: fadeUp 0.35s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } }

/* ======================= boot ======================= */
#screen-boot.active { display: flex; min-height: calc(100vh - 70px); align-items: center; justify-content: center; }
.boot-core { text-align: center; }
.boot-ring {
  width: 120px; height: 120px; margin: 0 auto 26px; border-radius: 50%;
  border: 2px dashed var(--cyan); animation: spin 3s linear infinite;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 30px var(--cyan-dim);
}
.boot-ring.inner {
  width: 78px; height: 78px; margin: 0; border-color: rgba(0,229,255,0.5);
  animation: spinBack 2s linear infinite; box-shadow: none;
}
@keyframes spinBack { to { transform: rotate(-360deg); } }
.boot-status { font-size: 13px; letter-spacing: 0.28em; color: var(--cyan); min-height: 20px; }
.boot-status.err { color: var(--red); }
.boot-note { margin-top: 10px; font-size: 10px; color: var(--text-dim); letter-spacing: 0.16em; }

/* ======================= panels ======================= */
.panel {
  max-width: 720px; margin: 6vh auto; padding: 38px 42px;
  border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(160deg, rgba(10,18,32,0.92), rgba(5,8,15,0.92));
  box-shadow: 0 0 60px rgba(0, 229, 255, 0.06), inset 0 0 30px rgba(0,0,0,0.4);
  position: relative;
}
.panel::before {
  content: ''; position: absolute; inset: -1px; border-radius: 14px; pointer-events: none;
  background: linear-gradient(90deg, transparent 40%, rgba(0,229,255,0.25), transparent 60%);
  background-size: 300% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px;
  animation: borderScan 5s linear infinite;
}
@keyframes borderScan { to { background-position: 300% 0; } }

.panel-title { font-size: 19px; letter-spacing: 0.24em; color: var(--cyan); }
.panel-sub { margin-top: 12px; font-size: 12px; line-height: 1.75; color: var(--text-dim); }

.home-actions { display: flex; gap: 16px; margin-top: 28px; flex-wrap: wrap; }
.btn-main {
  flex: 1; min-width: 220px; padding: 16px 22px;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.16em; font-weight: 700;
  color: var(--bg); background: var(--cyan); border: none; border-radius: 8px; cursor: pointer;
  box-shadow: 0 0 22px var(--cyan-dim);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn-main:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 0 34px rgba(0,229,255,0.55); }
.btn-main:disabled { opacity: 0.3; cursor: not-allowed; box-shadow: none; }
.btn-main.accent { background: var(--green); box-shadow: 0 0 22px rgba(34,255,136,0.3); }
.btn-ghost {
  background: none; border: 1px solid var(--line); color: var(--text-dim);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  padding: 10px 16px; border-radius: 8px; cursor: pointer;
}
.btn-ghost:hover { color: var(--text); border-color: var(--cyan); }

.hint { margin-top: 12px; font-size: 10.5px; color: var(--amber); letter-spacing: 0.1em; }
.list-title { margin-top: 34px; font-size: 11px; letter-spacing: 0.26em; color: var(--text-dim); }
.profiles { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.empty { padding: 18px; text-align: center; font-size: 11px; color: var(--text-dim); border: 1px dashed var(--line); border-radius: 8px; }
.profile-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border: 1px solid var(--line); border-radius: 8px;
  background: rgba(0, 229, 255, 0.03);
}
.profile-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.profile-name { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; }
.profile-meta { margin-left: auto; font-size: 10px; color: var(--text-dim); }
.btn-x { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 13px; padding: 4px 8px; }
.btn-x:hover { color: var(--red); }
.privacy-note { margin-top: 26px; font-size: 10px; color: var(--text-dim); letter-spacing: 0.06em; }

/* ======================= camera stage ======================= */
.stage-head { display: flex; align-items: center; gap: 18px; padding: 16px 22px 0; }
.stage-title { font-size: 11.5px; letter-spacing: 0.24em; color: var(--cyan); }

.stage {
  display: flex; gap: 20px; padding: 16px 22px 30px;
  align-items: stretch; flex-wrap: wrap; justify-content: center;
}
.cam-wrap {
  position: relative; flex: 1 1 640px; max-width: 900px;
  aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 0 50px rgba(0,229,255,0.08);
  background: #000;
}
#cam, #hud {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transform: scaleX(-1);   /* mirror like a mirror */
}
#hud { object-fit: fill; }

.warn-multi {
  display: none; position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  padding: 8px 16px; border-radius: 6px; font-size: 11px; letter-spacing: 0.14em;
  background: rgba(255, 59, 92, 0.15); border: 1px solid var(--red); color: var(--red);
  backdrop-filter: blur(4px); z-index: 3;
}

.prompt {
  position: absolute; left: 50%; bottom: 58px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 16px;
  padding: 14px 26px; border-radius: 12px; z-index: 3;
  background: rgba(5, 8, 15, 0.72); border: 1px solid var(--line);
  backdrop-filter: blur(8px); min-width: 340px; max-width: 90%;
}
.prompt-icon { font-size: 30px; filter: drop-shadow(0 0 8px var(--cyan)); }

/* ---- animated movement demo (little face that shows what to do) ---- */
.prompt-anim {
  width: 56px; height: 56px; flex: none; color: var(--cyan);
  perspective: 260px; filter: drop-shadow(0 0 8px var(--cyan-dim));
}
.prompt-anim svg { width: 100%; height: 100%; }
.df-eye, #df-mouth { transform-box: fill-box; transform-origin: center; }
#df-mouth { transform: scaleY(0.35); }
.anim-turn-left svg  { animation: demoTurnL 1.8s ease-in-out infinite; }
.anim-turn-right svg { animation: demoTurnR 1.8s ease-in-out infinite; }
@keyframes demoTurnL { 0%, 100% { transform: rotateY(0deg); } 40%, 60% { transform: rotateY(-50deg); } }
@keyframes demoTurnR { 0%, 100% { transform: rotateY(0deg); } 40%, 60% { transform: rotateY(50deg); } }
.anim-blink .df-eye { animation: demoBlink 1.6s ease-in-out infinite; }
@keyframes demoBlink {
  0%, 30%, 60%, 100% { transform: scaleY(1); }
  10%, 15% { transform: scaleY(0.08); }
  40%, 45% { transform: scaleY(0.08); }
}
.anim-smile #df-mouth { animation: demoSmile 1.8s ease-in-out infinite; }
@keyframes demoSmile { 0%, 100% { transform: scaleY(0.35); } 45%, 65% { transform: scaleY(1.3); } }
.anim-closer svg { animation: demoCloser 1.8s ease-in-out infinite; }
@keyframes demoCloser { 0%, 100% { transform: scale(0.76); } 45%, 65% { transform: scale(1.16); } }
.anim-center svg { animation: demoPulse 2.4s ease-in-out infinite; }
@keyframes demoPulse { 50% { opacity: 0.5; } }
.prompt-text { font-size: 16px; font-weight: 700; letter-spacing: 0.2em; color: var(--cyan); min-height: 22px; }
.prompt-hint { font-size: 10px; color: var(--text-dim); letter-spacing: 0.1em; margin-top: 3px; }

.timer-track {
  position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: rgba(255,255,255,0.06); z-index: 3;
}
.timer-bar { height: 100%; width: 100%; background: linear-gradient(90deg, var(--cyan), var(--green)); transition: width 0.2s linear; }

.pips { position: absolute; top: 14px; left: 16px; display: flex; gap: 8px; z-index: 3; }
.pip {
  width: 42px; height: 7px; border-radius: 4px; overflow: hidden;
  background: rgba(255,255,255,0.1); position: relative;
}
.pip.done { background: var(--green); box-shadow: 0 0 8px rgba(34,255,136,0.6); }
.pip.now::after {
  content: ''; position: absolute; inset: 0; width: var(--f, 0%);
  background: var(--cyan); box-shadow: 0 0 8px var(--cyan);
  transition: width 0.15s ease;
}

/* telemetry sidebar */
.telemetry {
  flex: 0 1 240px; min-width: 220px; padding: 20px;
  border: 1px solid var(--line); border-radius: 14px;
  background: rgba(10, 18, 32, 0.7); backdrop-filter: blur(6px);
  display: flex; flex-direction: column; gap: 16px;
}
.tele-title { font-size: 10px; letter-spacing: 0.3em; color: var(--text-dim); }
.meter label { font-size: 9.5px; letter-spacing: 0.2em; color: var(--text-dim); display: block; margin-bottom: 6px; }
.meter-track { height: 8px; border-radius: 4px; background: rgba(255,255,255,0.07); overflow: hidden; }
.meter-fill {
  height: 100%; width: var(--v, 0%);
  background: linear-gradient(90deg, var(--cyan), var(--green));
  box-shadow: 0 0 10px var(--cyan-dim);
  transition: width 0.25s ease;
}
.meter-low .meter-fill { background: linear-gradient(90deg, var(--red), var(--amber)); }
.meter-val { font-size: 10px; color: var(--text-dim); }
.tele-foot { margin-top: auto; font-size: 9.5px; line-height: 2; color: var(--text-dim); letter-spacing: 0.06em; }

/* ======================= result ======================= */
.result-panel { text-align: center; }
.result-badge {
  width: 88px; height: 88px; margin: 0 auto 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 42px; font-weight: 700;
}
.result-badge.ok { color: var(--green); border: 2px solid var(--green); box-shadow: 0 0 40px rgba(34,255,136,0.4); animation: pulseOk 1.6s ease infinite; }
.result-badge.bad { color: var(--red); border: 2px solid var(--red); box-shadow: 0 0 40px rgba(255,59,92,0.4); animation: shake 0.4s ease; }
@keyframes pulseOk { 50% { box-shadow: 0 0 60px rgba(34,255,136,0.7); } }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.result-title { font-size: 24px; letter-spacing: 0.3em; min-height: 32px; }
.result-sub { margin-top: 10px; font-size: 12px; color: var(--text-dim); line-height: 1.7; }
.checks { margin: 26px 0; display: flex; flex-direction: column; gap: 7px; text-align: left; }
.check-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-radius: 8px; font-size: 11px; letter-spacing: 0.08em;
  border: 1px solid var(--line); background: rgba(0,229,255,0.03);
}
.check-row.ok .check-ic { color: var(--green); }
.check-row.bad { border-color: rgba(255,59,92,0.4); background: rgba(255,59,92,0.05); }
.check-row.bad .check-ic { color: var(--red); }
.check-label { font-weight: 700; }
.check-detail { margin-left: auto; color: var(--text-dim); font-size: 10px; }

/* ======================= modal ======================= */
.modal {
  display: none; position: fixed; inset: 0; z-index: 10;
  background: rgba(3, 5, 10, 0.8); backdrop-filter: blur(6px);
  align-items: center; justify-content: center;
}
.modal.open { display: flex; }
.modal-card {
  width: min(420px, 92vw); padding: 30px;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--bg2); box-shadow: 0 0 60px rgba(0,229,255,0.15);
}
.modal-title { font-size: 12px; letter-spacing: 0.3em; color: var(--cyan); margin-bottom: 18px; }
#input-name {
  width: 100%; padding: 14px 16px; font-family: var(--mono); font-size: 15px;
  color: var(--text); background: rgba(0,229,255,0.05);
  border: 1px solid var(--line); border-radius: 8px; outline: none; letter-spacing: 0.06em;
}
#input-name:focus { border-color: var(--cyan); box-shadow: 0 0 14px var(--cyan-dim); }
.modal-actions { display: flex; gap: 12px; margin-top: 20px; justify-content: flex-end; }

/* ======================= responsive ======================= */
@media (max-width: 760px) {
  .stats { display: none; }
  .panel { margin: 3vh 14px; padding: 26px 20px; }
  .telemetry { flex: 1 1 100%; }
  .prompt { min-width: 0; width: calc(100% - 28px); padding: 10px 16px; gap: 12px; bottom: 44px; }
  .prompt-text { font-size: 13px; letter-spacing: 0.14em; }
  .prompt-anim { width: 46px; height: 46px; }
  .stage { position: relative; padding: 12px 14px 24px; gap: 14px; }
  /* portrait phones: tall camera stage so the face fits comfortably */
  .cam-wrap { flex: 1 1 100%; aspect-ratio: 3 / 4; max-height: 74vh; }
  /* telemetry becomes a compact overlay on the camera — everything on one screen */
  .telemetry {
    position: absolute; top: 24px; right: 26px; z-index: 4;
    flex: none; width: auto; min-width: 0; padding: 9px 11px; gap: 7px;
    background: rgba(5, 8, 15, 0.6); border-radius: 10px;
  }
  .tele-title, .tele-foot { display: none; }
  .meter { display: flex; align-items: center; gap: 7px; }
  .meter label { margin: 0; width: 58px; font-size: 7.5px; }
  .meter-track { width: 52px; height: 5px; flex: none; }
  .meter-val { font-size: 8.5px; width: 26px; text-align: right; }
}
@media (max-width: 760px) and (orientation: landscape) {
  .cam-wrap { aspect-ratio: 16 / 9; max-height: none; }
}