body {
  margin:0;
  font-family:system-ui;
  background:#020617;
  color:#e5e7eb;
  text-align:center;
}

header { padding:20px; }
header h1 { margin:0; color:#22c55e; }

.shield-container { margin:20px 0; position:relative; }

.shield {
  width:140px;
  opacity:.3;
  transition:all .9s cubic-bezier(0.16,1,0.3,1);
}

.shield.mid {
  opacity:.8;
  filter:drop-shadow(0 0 30px #22c55e);
  transform:scale(1.05);
}

.shield.full {
  opacity:1;
  filter:drop-shadow(0 0 60px #22c55e);
  transform:scale(1.15);
}

.shield.final {
  opacity:1;
  filter:drop-shadow(0 0 100px #22c55e);
  transform:scale(1.22);
}

.shield.fade-out {
  opacity:0;
  transform:scale(0.95);
}

.pulse { animation:pulse 2.5s infinite; }
@keyframes pulse {
  0% { transform:scale(1); }
  50% { transform:scale(1.06); }
  100% { transform:scale(1); }
}

.shield-toast {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:#22c55e;
  color:#020617;
  padding:8px 14px;
  border-radius:999px;
  font-weight:600;
  animation:toastIn .25s ease, toastOut .25s ease 1.1s forwards;
}

@keyframes toastIn {
  from { opacity:0; transform:translate(-50%,-40%); }
  to { opacity:1; transform:translate(-50%,-50%); }
}
@keyframes toastOut {
  to { opacity:0; transform:translate(-50%,-60%); }
}

.card {
  border:1px solid #1e293b;
  border-radius:16px;
  padding:20px;
  margin:20px;
}

.confidence { margin:16px 0; }

.choices {
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:12px;
}

.choices button {
  padding:14px;
  border:none;
  border-radius:12px;
  background:#22c55e;
  color:#020617;
  font-size:16px;
}

.feedback {
  margin-top:12px;
  padding:12px;
  border-radius:10px;
  background:#7c2d12;
  color:#fde68a;
  font-size:14px;
}

.hidden { display:none !important; }

.bar {
  height:10px;
  background:#1e293b;
  border-radius:10px;
  overflow:hidden;
}
#barFill.low { width:33%; background:#ef4444; height:100%; }
#barFill.medium { width:66%; background:#eab308; height:100%; }
#barFill.high { width:100%; background:#22c55e; height:100%; }

.celebration {
  position:fixed;
  inset:0;
  background:rgba(2,6,23,0.96);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:999;
}

.celebration-card {
  background:#020617;
  border:2px solid #22c55e;
  border-radius:20px;
  padding:32px;
  max-width:320px;
}

.celebration .recap {
  margin-top:8px;
  font-size:15px;
  color:#a7f3d0;
}