/* ============================================================================
   human-verification.css — a real-looking CAPTCHA having a nervous breakdown.
   The shared shell (dark) provides header/overlays. The verification CARD is a
   clean white web widget that slowly desaturates into sterile dread as the
   Existential Load (.dread-1/2/3 on .hv-card) rises.
   ============================================================================ */

#game-wrap { background: radial-gradient(circle at 50% 30%, #14161c, #08090c 70%); }
.hv-stage { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 8px; }

/* ── THE CARD ──────────────────────────────────────────────────────────────── */
.hv-card {
  position: relative;
  width: min(420px, 100%); max-height: 100%; overflow: hidden;
  display: flex; flex-direction: column;
  background: #ffffff; color: #202124;
  font-family: 'Inter', 'Barlow', sans-serif;
  border: 1px solid #dadce0; border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,.55);
  user-select: none; -webkit-user-select: none;
  transition: background .8s ease, filter .8s ease, color .8s ease;
}
/* CRITICAL: only the mini-game body flexes/scrolls. Everything else — and
   especially the Verify button — stays pinned and visible at all times. */
.hv-browser, .hv-loginbar, .hv-promptbox, .hv-sysmsg,
.hv-actions, .hv-powerups, .hv-meters, .hv-badge { flex-shrink: 0; }
/* existential degradation: still sterile, never horror — just drained */
.hv-card.dread-1 { background: #f3f4f6; }
.hv-card.dread-2 { background: #e9eaed; filter: grayscale(.35) contrast(.97); }
.hv-card.dread-3 { background: #e2e3e6; filter: grayscale(.7) contrast(.94) brightness(.98); }

/* fake browser bar */
.hv-browser { display: flex; align-items: center; gap: 7px; padding: 7px 12px; background: #f1f3f4; border-bottom: 1px solid #e3e5e8; }
.hv-lock { font-size: 11px; }
.hv-url { flex: 1; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #5f6368; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-dots { color: #9aa0a6; font-size: 14px; }

/* login progress bar */
.hv-loginbar { padding: 8px 14px 4px; }
.hv-login-lbl { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #5f6368; }
.hv-login-track { height: 4px; background: #e6e8eb; border-radius: 999px; margin-top: 4px; overflow: hidden; }
.hv-login-track i { display: block; height: 100%; width: 0%; background: #1a73e8; border-radius: 999px; transition: width .5s ease; }

/* prompt */
.hv-promptbox { background: #1a73e8; color: #fff; margin: 10px 14px 0; border-radius: 8px; padding: 11px 13px; transition: background .8s ease; }
.hv-card.dread-2 .hv-promptbox { background: #5b6470; }
.hv-card.dread-3 .hv-promptbox { background: #444a54; }
.hv-prompt-sub { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; opacity: .8; }
.hv-prompt { font-size: 17px; font-weight: 600; line-height: 1.25; margin-top: 2px; }

/* ── BODY (mini-game area) ─────────────────────────────────────────────────── */
.hv-body { padding: 10px 14px 4px; flex: 1 1 auto; min-height: 96px; overflow-y: auto; display: flex; flex-direction: column; animation: hv-fadein .26s ease; }
@keyframes hv-fadein { from { opacity: .2; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* GRID */
.hv-grid { display: grid; gap: 5px; width: 100%; max-width: 318px; margin: 0 auto; }
.hv-grid.g3 { grid-template-columns: repeat(3,1fr); }
.hv-grid.g4 { grid-template-columns: repeat(4,1fr); }
.hv-cell {
  position: relative; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center;
  font-size: clamp(22px, 6.5vw, 34px); background: #f1f3f4; border: 1px solid #e3e5e8; border-radius: 4px;
  cursor: pointer; overflow: hidden; transition: transform .08s;
}
.hv-cell:active { transform: scale(.96); }
.hv-cell.sel { box-shadow: inset 0 0 0 3px #1a73e8; }
.hv-cell.sel::after { content: '✓'; position: absolute; top: 1px; left: 4px; font-size: 14px; color: #fff; background: #1a73e8; width: 17px; height: 17px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.hv-cell.nested { animation: hv-pulse 1.4s infinite; }
@keyframes hv-pulse { 50% { background: #dde7fb; } }

/* SLIDER */
.hv-slider-wrap { padding: 18px 4px 8px; }
.hv-slider-labels { display: flex; justify-content: space-between; font-size: 11px; color: #5f6368; margin-bottom: 10px; font-weight: 500; }
.hv-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: linear-gradient(90deg,#ea4335,#fbbc04,#34a853,#fbbc04,#ea4335); outline: none; }
.hv-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 3px solid #1a73e8; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.hv-slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid #1a73e8; cursor: pointer; }
.hv-slider-read { text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 13px; color: #202124; margin-top: 14px; }

/* DOTS */
.hv-dots-area { position: relative; flex: 1; min-height: 210px; }
.hv-dot { position: absolute; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 2px solid #1a73e8; color: #1a73e8; font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 13px; display: flex; align-items: center; justify-content: center; transform: translate(-50%,-50%); cursor: pointer; }
.hv-dot.done { background: #1a73e8; color: #fff; }
.hv-dot.next { box-shadow: 0 0 0 4px rgba(26,115,232,.25); }
.hv-dot-line { position: absolute; height: 2px; background: #1a73e8; transform-origin: 0 50%; pointer-events: none; }

/* OPTION LIST (math / bomb / terms / phrase / still / final) */
.hv-opts { display: flex; flex-direction: column; gap: 7px; }
.hv-opt {
  text-align: left; padding: 12px 14px; border-radius: 6px; font-size: 14px; font-weight: 500;
  background: #f1f3f4; border: 1px solid #dadce0; color: #202124; transition: background .12s, border-color .12s;
}
.hv-opt:hover { background: #e8eaed; border-color: #c6c9ce; }
.hv-opt.wire { font-family: 'JetBrains Mono', monospace; display: flex; align-items: center; gap: 10px; }
.hv-opt.wire::before { content: ''; width: 22px; height: 4px; border-radius: 2px; background: var(--wire,#ea4335); }
.hv-q { font-size: 15px; font-weight: 600; line-height: 1.35; margin-bottom: 10px; color: #202124; }

/* TEXT input (mother's maiden name) */
.hv-input { width: 100%; padding: 12px 14px; font-size: 15px; border: 1px solid #dadce0; border-radius: 6px; background: #fff; color: #202124; font-family: 'Inter',sans-serif; }
.hv-input:focus { outline: none; border-color: #1a73e8; }

/* ── SYSTEM MESSAGE ────────────────────────────────────────────────────────── */
.hv-sysmsg { min-height: 18px; padding: 4px 14px 0; font-size: 12px; font-weight: 500; color: #5f6368; font-style: italic; transition: color .3s; }
.hv-sysmsg.good { color: #137333; }
.hv-sysmsg.bad  { color: #c5221f; }
.hv-sysmsg.weird { color: #7b1fa2; }

/* ── ACTIONS ───────────────────────────────────────────────────────────────── */
.hv-actions { display: flex; align-items: center; gap: 8px; padding: 8px 14px 6px; }
.hv-skip { font-size: 12px; color: #5f6368; padding: 8px 10px; border-radius: 6px; }
.hv-skip:hover { background: #f1f3f4; color: #202124; }
.hv-timer { flex: 1; text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #ea4335; }
.hv-verify { padding: 9px 20px; background: #1a73e8; color: #fff; font-size: 14px; font-weight: 600; border-radius: 6px; }
.hv-verify:hover { background: #1765cc; }
.hv-verify:disabled { background: #c6d6f5; cursor: default; }
.hv-verify.hidden { display: none; }

/* powerups */
.hv-powerups { display: flex; gap: 6px; padding: 0 14px 8px; flex-wrap: wrap; }
.hv-pu { display: flex; align-items: center; gap: 4px; font-size: 11px; padding: 5px 9px; border-radius: 999px; background: #f1f3f4; border: 1px solid #dadce0; color: #3c4043; }
.hv-pu:hover:not(:disabled) { background: #e8eaed; }
.hv-pu:disabled { opacity: .4; }
.hv-pu b { font-family: 'JetBrains Mono', monospace; }

/* ── METERS ────────────────────────────────────────────────────────────────── */
.hv-meters { display: flex; gap: 12px; padding: 4px 14px 8px; }
.hv-meter { flex: 1; }
.hv-meter-lbl { display: flex; justify-content: space-between; font-size: 10px; color: #5f6368; margin-bottom: 3px; font-weight: 500; }
.hv-meter-lbl b { font-family: 'JetBrains Mono', monospace; color: #202124; }
.hv-bar { height: 5px; background: #e6e8eb; border-radius: 999px; overflow: hidden; }
.hv-bar i { display: block; height: 100%; border-radius: 999px; transition: width .35s ease, background .35s ease; }
.hv-bar-hum { background: #34a853; }
.hv-bar-sus { background: #ea4335; }

/* footer badge */
.hv-badge { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-top: 1px solid #eceef1; background: #fafafa; }
.hv-badge-ico { width: 16px; height: 16px; border-radius: 3px; background: #1a73e8; color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.hv-badge-txt { font-size: 12px; font-weight: 600; color: #5f6368; flex: 1; }
.hv-badge-fine { font-size: 9px; color: #9aa0a6; }

/* ── TAKEOVER (login fakeout / dramatic system lines) ──────────────────────── */
#hv-takeover { background: rgba(8,9,12,.96); }
.hv-takeover-inner { margin: auto; text-align: center; padding: 30px; max-width: 380px; }
.hv-takeover-ico { font-size: 56px; margin-bottom: 14px; opacity: 0; transform: scale(.6); animation: hv-pop .4s ease forwards; }
.hv-takeover-text { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 22px; color: #e8eaed; line-height: 1.35; min-height: 30px; }
@keyframes hv-pop { to { opacity: 1; transform: scale(1); } }

/* a subtle "bot cursor" easter egg sweeps the card */
.hv-botcursor { position: absolute; font-size: 20px; z-index: 50; pointer-events: none; transition: left .25s linear, top .25s linear; }

/* ── ACTIONS: pinned footer separator so Verify always reads as available ──── */
.hv-actions { border-top: 1px solid #eceef1; }
.hv-verify { min-width: 92px; }

/* ── HORROR TIER (very high Existential Load) — funny-dread, not jump-scare ── */
.hv-card.horror { background: #0e0f13 !important; color: #c8ccd2; border-color: #1a1c22; filter: none; }
.hv-card.horror .hv-browser { background: #121317; border-color: #1a1c22; }
.hv-card.horror .hv-url, .hv-card.horror .hv-login-lbl, .hv-card.horror .hv-dots { color: #6a6f78; }
.hv-card.horror .hv-login-track { background: #1a1c22; }
.hv-card.horror .hv-login-track i { background: #7a1f24; }
.hv-card.horror .hv-promptbox { background: #2a0a0e; }
.hv-card.horror .hv-prompt, .hv-card.horror .hv-q { color: #e8e2e2; }
.hv-card.horror .hv-cell, .hv-card.horror .hv-opt, .hv-card.horror .hv-input { background: #15171c; border-color: #23262d; color: #c8ccd2; }
.hv-card.horror .hv-opt:hover { background: #1c1f25; }
.hv-card.horror .hv-sysmsg { color: #8a8f98; }
.hv-card.horror .hv-actions { border-top-color: #1a1c22; }
.hv-card.horror .hv-skip { color: #6a6f78; }
.hv-card.horror .hv-pu { background: #15171c; border-color: #23262d; color: #aab0b8; }
.hv-card.horror .hv-bar { background: #1a1c22; }
.hv-card.horror .hv-meter-lbl, .hv-card.horror .hv-meter-lbl b { color: #8a8f98; }
.hv-card.horror .hv-badge { background: #0e0f13; border-color: #1a1c22; }
.hv-card.horror .hv-badge-ico { background: #7a1f24; }
.hv-card.horror .hv-badge-txt { color: #6a6f78; }
.hv-card.horror::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 60;
  box-shadow: inset 0 0 90px 24px rgba(0,0,0,.78);
  animation: hv-flicker 7s infinite;
}
@keyframes hv-flicker { 0%,96%,100% { opacity: 1; } 97% { opacity: .82; } 98% { opacity: 1; } 99% { opacity: .9; } }

/* ── HOLD-TO-CONFIRM ───────────────────────────────────────────────────────── */
.hv-hold-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px 6px; }
.hv-hold {
  position: relative; width: 130px; height: 130px; border-radius: 50%;
  background: #f1f3f4; border: 2px solid #1a73e8; color: #1a73e8;
  font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; text-align: center;
}
.hv-hold-fill { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(#1a73e8 var(--p,0%), transparent 0); opacity: .25; }
.hv-hold-hint { font-size: 11px; color: #5f6368; }
.hv-card.horror .hv-hold { background: #15171c; border-color: #7a1f24; color: #c8ccd2; }

/* ── MEMORY SEQUENCE ───────────────────────────────────────────────────────── */
.hv-mem-stage { display: flex; align-items: center; justify-content: center; min-height: 120px; font-size: 64px; }
.hv-mem-stage .hv-mem-flash { animation: hv-flash 0.55s ease; }
@keyframes hv-flash { 0% { transform: scale(.4); opacity: 0; } 40% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.hv-mem-pick { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 6px 0; }
.hv-mem-btn { width: 56px; height: 56px; font-size: 30px; background: #f1f3f4; border: 1px solid #dadce0; border-radius: 8px; }
.hv-mem-btn.done { box-shadow: inset 0 0 0 3px #1a73e8; }
.hv-card.horror .hv-mem-btn { background: #15171c; border-color: #23262d; }

/* ── AUDIO CHALLENGE ───────────────────────────────────────────────────────── */
.hv-audio-play { align-self: center; margin: 6px 0 12px; padding: 10px 18px; background: #f1f3f4; border: 1px solid #dadce0; border-radius: 8px; font-size: 13px; font-weight: 600; color: #3c4043; }
.hv-audio-wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 36px; margin-bottom: 8px; }
.hv-audio-wave i { width: 3px; background: #1a73e8; border-radius: 2px; animation: hv-wave 1s infinite ease-in-out; }
@keyframes hv-wave { 0%,100% { height: 6px; } 50% { height: 28px; } }
.hv-card.horror .hv-audio-play { background: #15171c; border-color: #23262d; color: #aab0b8; }