/* Visual skin for the existing access gate. It only restyles the elements access-gate.js
   already renders; it adds no text and changes no behaviour. Selectors start with
   "html body" so they win over the gate's own injected stylesheet without !important. */

html body #accessGate {
  --gate-action-width: 100%;
  justify-items: start;
  padding: 24px clamp(16px, 8vw, 136px);
  background:
    linear-gradient(90deg, rgba(5, 8, 15, .84) 0%, rgba(5, 8, 15, .4) 52%, rgba(5, 8, 15, 0) 72%),
    url("assets/posters/01-globe-1600.webp") 72% 50% / cover no-repeat,
    #02040a;
  font-family: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
}
html.gate-world-on body #accessGate {
  background: linear-gradient(90deg, rgba(5, 8, 15, .84) 0%, rgba(5, 8, 15, .4) 52%, rgba(5, 8, 15, 0) 72%);
}
html body #accessGate::before { display: none; }

#gateWorld { position: fixed; inset: 0; z-index: 999998; background: #02040a; }
#gateWorld img, #gateWorld canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: 72% 50%; }
#gateWorld.is-live img { opacity: 0; transition: opacity .8s; }
#gateBack { position: fixed; z-index: 1000000; top: max(16px, env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid #3a475d; background: rgba(9, 14, 25, .85); color: #e9eef6; font: 500 15px "Inter Tight", system-ui, sans-serif; text-decoration: none; }
#gateBack:hover { border-color: #f5a524; }
#gateBack:focus-visible { outline: 2px solid #f5a524; outline-offset: 3px; }

html body #accessGate .access-card {
  width: min(470px, 100%);
  max-height: calc(100vh - 32px);
  border: 1px solid #1f2b3f;
  border-radius: 24px;
  padding: 34px 38px 30px;
  background: rgba(9, 14, 25, .92);
  box-shadow: 0 50px 120px rgba(0, 0, 0, .6);
  color: #e9eef6;
  text-align: left;
  backdrop-filter: blur(6px);
}
html body #accessGate .access-card::before { display: none; }
html body #accessGate .access-card__content { justify-items: stretch; }

/* The gate's own title, shown as a quiet label. */
html body #accessGate h2 {
  padding: 0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #9aa7ba;
  text-shadow: none;
}
html body #accessGate p { color: #c9d3e1; }

html body #accessGate .access-card__turnstile {
  width: 100%;
  margin: 22px 0 14px;
  border-radius: 10px;
}
html body #continueTelegramBtn,
html body #acceptLegalBtn {
  width: 100%;
  min-height: 56px;
  border: 0;
  border-radius: 999px;
  clip-path: none;
  padding: 0 24px;
  background: #f5a524;
  color: #0a0f18;
  box-shadow: none;
  font: 600 16px "Inter Tight", system-ui, sans-serif;
  text-transform: none;
}
html body #accessGate .access-card__turnstile[hidden] + #continueTelegramBtn { margin-top: 22px; }
html body #continueTelegramBtn:hover,
html body #acceptLegalBtn:hover:not(:disabled),
html body #continueTelegramBtn:focus-visible,
html body #acceptLegalBtn:focus-visible {
  filter: none;
  background: #ffb63d;
  outline: 2px solid #f5a524;
  outline-offset: 3px;
  box-shadow: none;
}
html body #continueTelegramBtn:disabled,
html body #acceptLegalBtn:disabled { background: #1a2436; color: #9aa7ba; }
html body #accessGateMessage {
  margin-top: 14px;
  color: #c9d3e1;
  font-weight: 500;
  font-size: 14px;
  text-align: left;
}

html body #accessGate .legal-consent-panel { text-align: left; }
html body #accessGate .legal-consent-panel h3 {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: 34px;
  line-height: 1.05;
  color: #fff;
}
html body #accessGate .legal-document-item {
  border: 0;
  border-top: 1px solid #1c2739;
  border-radius: 0;
  background: none;
  padding: 13px 0;
  text-align: left;
}
html body #accessGate .legal-document-item input { accent-color: #f5a524; }
html body #accessGate .legal-document-title { color: #fff; font-weight: 600; }
html body #accessGate .legal-document-copy { color: #9aa7ba; }

html body #accessGate .passkey-recovery-panel {
  width: 100%;
  margin: 22px 0 0;
  border: 1px solid #263247;
  border-radius: 16px;
  padding: 18px;
  background: #0b1322;
  box-shadow: none;
  text-align: left;
}
html body #accessGate .passkey-recovery-button {
  border-radius: 999px;
  border: 1px solid #3a475d;
  background: transparent;
  color: #e9eef6;
  font: 600 15px "Inter Tight", system-ui, sans-serif;
  text-transform: none;
  clip-path: none;
}
html body #accessGate .passkey-recovery-button:focus-visible { outline: 2px solid #f5a524; outline-offset: 3px; }

@media (max-width: 760px) {
  html body #accessGate {
    align-items: end;
    justify-items: center;
    padding: 12px;
    background:
      linear-gradient(180deg, rgba(5, 8, 15, 0) 0%, rgba(5, 8, 15, .35) 40%, rgba(5, 8, 15, .88) 72%),
      url("assets/posters/01-globe-960.webp") 50% 20% / cover no-repeat,
      #02040a;
  }
  html.gate-world-on body #accessGate {
    background: linear-gradient(180deg, rgba(5, 8, 15, 0) 0%, rgba(5, 8, 15, .35) 40%, rgba(5, 8, 15, .88) 72%);
  }
  #gateWorld img { object-position: 50% 20%; }
  html body #accessGate .access-card { width: 100%; padding: 26px 22px 22px; }
}