/* "Could You Survive Hybrid Games?" quiz - graphite skin.
   Rides the same :root tokens booking.css defines (--hg-*), so the quiz and
   the booking flow can never drift apart visually. Namespaced .hgq. */

/* ---- popup shell (mirror of the booking modal) ---- */
.hgq-modal { display: none; position: fixed !important; top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%; z-index: 2147483000 !important;
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.hgq-modal.open { display: block; }
.hgq-modal-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.94); }
.hgq-modal-box { position: relative; max-width: 700px; margin: 34px auto;
  background-color: var(--hg-bg, #333333); border: 1px solid #FFFFFF; padding: 0; }
.hgq-modal-close { position: fixed; top: 10px; right: 14px; z-index: 4; background: rgba(0,0,0,.45);
  border: none; color: #fff; font-size: 24px; line-height: 1; cursor: pointer;
  padding: 0; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; }
.hgq-modal-close:hover { opacity: .8; }
@media (max-width: 600px) {
  .hgq-modal-box { margin: 0; min-height: 100%; border: 0;
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
  .hgq-modal-close { top: calc(8px + env(safe-area-inset-top, 0px)); }
}

.hgq {
  background-color: var(--hg-bg, #333333);
  color: var(--hg-ink, #FFFFFF);
  font-family: var(--hg-display, 'Gilroy', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif);
  max-width: 660px; margin: 0 auto; padding: 44px 24px 52px;
  box-sizing: border-box; text-align: center;
  -webkit-font-smoothing: antialiased;
}
.hgq *, .hgq *::before, .hgq *::after { box-sizing: border-box; }

.hgq-screen { display: none; }
.hgq-screen.visible { display: block; animation: hgq-fade .25s ease; }
@keyframes hgq-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.hgq-eyebrow {
  font-family: var(--hg-mono, 'Geist Mono', 'Courier New', Courier, monospace);
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--hg-faint, rgba(255,255,255,.34)); margin-bottom: 14px;
}
.hgq-title {
  font-size: clamp(30px, 5.4vw, 44px); line-height: 1.06; font-weight: 300;
  letter-spacing: -.5px; margin: 0 0 16px; text-transform: uppercase;
}
.hgq-sub {
  font-family: var(--hg-mono, 'Geist Mono', 'Courier New', Courier, monospace);
  font-size: 12.5px; line-height: 1.75; color: var(--hg-mute, rgba(255,255,255,.55));
  max-width: 480px; margin: 0 auto 26px;
}

.hgq-progress {
  font-family: var(--hg-mono, 'Geist Mono', 'Courier New', Courier, monospace);
  font-size: 10px; letter-spacing: .16em;
  color: var(--hg-faint, rgba(255,255,255,.34)); margin-bottom: 16px;
}
.hgq-q {
  font-size: clamp(19px, 3vw, 24px); line-height: 1.3; font-weight: 400;
  margin: 0 0 20px;
}
.hgq-q-sub { margin-bottom: 20px; }

.hgq-options { max-width: 480px; margin: 0 auto; }
.hgq-opt {
  display: block; width: 100%; margin-bottom: 10px; padding: 15px 18px;
  background: transparent; border: 1px solid var(--hg-line, rgba(255,255,255,.22));
  color: var(--hg-ink, #FFFFFF); text-align: left; cursor: pointer;
  font-family: var(--hg-mono, 'Geist Mono', 'Courier New', Courier, monospace);
  font-size: 12.5px; line-height: 1.5;
}
.hgq-opt:hover { border-color: var(--hg-ink, #FFFFFF); }
.hgq-opt.selected { background: var(--hg-ink, #FFFFFF); color: #000; border-color: var(--hg-ink, #FFFFFF); }

.hgq-back {
  margin-top: 8px; background: none; border: none; cursor: pointer;
  font-family: var(--hg-mono, 'Geist Mono', 'Courier New', Courier, monospace);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--hg-faint, rgba(255,255,255,.34)); padding: 10px;
}
.hgq-back:hover { color: var(--hg-ink, #FFFFFF); }

.hgq-field { max-width: 400px; margin: 0 auto 12px; }
.hgq-field input {
  width: 100%; padding: 14px 16px; background: transparent;
  border: 1px solid var(--hg-line, rgba(255,255,255,.22));
  color: var(--hg-ink, #FFFFFF); outline: none;
  font-family: var(--hg-mono, 'Geist Mono', 'Courier New', Courier, monospace); font-size: 13px;
}
.hgq-field input:focus { border-color: var(--hg-ink, #FFFFFF); }
.hgq-field input::placeholder { color: var(--hg-faint, rgba(255,255,255,.34)); }

.hgq-btn {
  display: inline-block; margin-top: 8px; padding: 16px 38px;
  background: var(--hg-ink, #FFFFFF); color: #000;
  border: 1px solid var(--hg-ink, #FFFFFF); cursor: pointer;
  font-family: var(--hg-mono, 'Geist Mono', 'Courier New', Courier, monospace);
  font-size: 11.5px; letter-spacing: .16em; font-weight: 500; text-transform: uppercase;
}
.hgq-btn:hover { background: transparent; color: var(--hg-ink, #FFFFFF); }
.hgq-btn:disabled { opacity: .55; cursor: not-allowed; }

.hgq-error {
  font-family: var(--hg-mono, 'Geist Mono', 'Courier New', Courier, monospace);
  font-size: 11.5px; color: #ff6b7a; min-height: 16px; margin: 4px 0 6px;
}
.hgq-fine {
  font-family: var(--hg-mono, 'Geist Mono', 'Courier New', Courier, monospace);
  font-size: 10px; letter-spacing: .06em;
  color: var(--hg-faint, rgba(255,255,255,.34)); margin-top: 16px;
}