#snap-stage {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 14px 16px;
  max-width: 580px; width: 100%; margin: 0 auto;
  background: radial-gradient(120% 80% at 50% -10%, #15131c 0%, var(--bg) 60%);
  font-family: var(--fn); user-select: none; -webkit-user-select: none;
}

.snp-hud { width: 100%; display: flex; align-items: center; justify-content: space-between; flex: none; }
.snp-lives { display: flex; gap: 3px; }
.snp-heart { color: var(--ac); font-size: 16px; text-shadow: 0 0 6px var(--glow0); }
.snp-heart.lost { color: var(--s3); text-shadow: none; }
.snp-streak { font-family: var(--ff); font-weight: 700; font-size: 13px; color: var(--am); }
.snp-score { font-family: var(--fm); font-weight: 700; font-size: 18px; color: var(--tx); }

.snp-timerbar { width: 100%; height: 5px; background: var(--s3); border-radius: 999px; overflow: hidden; flex: none; }
.snp-timerbar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--gn), var(--am) 55%, var(--ac)); }

.snp-card {
  width: 100%; background: linear-gradient(180deg, var(--s1), var(--s2));
  border: 1px solid var(--bd); border-radius: var(--rl);
  padding: 22px 20px; text-align: center;
}
.snp-tag { display: inline-block; font-family: var(--fm); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--su); background: var(--s3); padding: 3px 10px; border-radius: 999px; margin-bottom: 12px; }
.snp-prompt { font-family: var(--ff); font-weight: 700; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--mu); margin-bottom: 10px; }
.snp-scenario { font-family: var(--fc); font-weight: 600; font-size: 22px; line-height: 1.25; color: var(--tx); }
.snp-sub { font-size: 13px; color: var(--mu); margin-top: 10px; font-style: italic; }

.snp-choices { width: 100%; display: flex; gap: 12px; flex: none; }
.snp-btn {
  flex: 1 1 0; min-width: 0; padding: 18px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 26px; color: #fff; border: none; cursor: pointer;
  transition: transform .05s ease, filter .12s ease;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}
.snp-btn span { font-family: var(--ff); font-weight: 700; font-size: 15px; letter-spacing: .6px; text-transform: uppercase; }
.snp-btn:active { transform: translateY(2px) scale(.99); }
.snp-btn:hover { filter: brightness(1.08); }
.snp-left  { background: linear-gradient(180deg, #2faa6a, #1d8050); box-shadow: 0 0 18px rgba(52,211,153,.3); }
.snp-right { background: linear-gradient(180deg, #d23b3b, #a52020); box-shadow: 0 0 18px rgba(192,0,26,.3); }

.snp-progress { font-family: var(--fm); font-size: 11px; color: var(--su); flex: none; }

.snp-reveal {
  width: 100%; border-radius: var(--rl); padding: 18px 18px 16px; text-align: center;
  border: 1px solid var(--bd); background: var(--s1);
  animation: snpIn .18s ease;
}
@keyframes snpIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.snp-reveal.good { border-color: rgba(52,211,153,.5); background: linear-gradient(180deg, rgba(52,211,153,.08), var(--s1)); }
.snp-reveal.bad  { border-color: rgba(192,0,26,.5); background: linear-gradient(180deg, rgba(192,0,26,.08), var(--s1)); }
.snp-verdict { font-family: var(--ff); font-weight: 700; font-size: 18px; letter-spacing: .5px; margin-bottom: 8px; }
.snp-verdict.good { color: var(--gn); }
.snp-verdict.bad { color: var(--ac); }
.snp-answer { font-size: 13px; color: var(--mu); margin-bottom: 8px; }
.snp-answer b { color: var(--tx); }
.snp-explain { font-size: 14px; line-height: 1.5; color: var(--tx); margin-bottom: 14px; }
.snp-explain b, .snp-explain strong { color: var(--am); }
.snp-next {
  font-family: var(--ff); font-weight: 700; font-size: 14px; letter-spacing: .6px; text-transform: uppercase;
  padding: 11px 26px; background: var(--ac); color: #fff; border: none; cursor: pointer;
  box-shadow: 0 0 0 1px var(--ac), 0 0 16px var(--glow1);
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}
.snp-next:hover { background: #E0001F; }

@media (max-width: 480px) {
  .snp-scenario { font-size: 19px; }
  .snp-btn { font-size: 22px; }
}