@font-face{
  font-family:"SdGeorgiaLight-pMj1";
  src:url("../fonts/SdGeorgiaLight-pMj1.woff2") format("woff2"),
      url("../fonts/SdGeorgiaLight-pMj1.woff") format("woff"),
      url("../fonts/SdGeorgiaLight-pMj1.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

.gate-overlay{
  position:fixed;
  inset:0;
  z-index:2147483647;
  overflow:hidden;
  background:#000;
  font-family:"SdGeorgiaLight-pMj1", Georgia, "Times New Roman", serif;
}

.gate-bg{
  position:absolute;
  inset:0;
  background:url("../media/gate/envelope-closed.png") center/cover no-repeat;
  pointer-events:none;
}

.gate-ui{
  position:absolute;
  left:50%;
  bottom:12vh;
  transform:translateX(-50%);
  width:min(520px, 92vw);
  background:rgba(255,250,236,0.92);
  backdrop-filter: blur(2px);
  border-radius:14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  padding:22px 22px 18px;
  box-sizing:border-box;
  animation: gateFadeUp 650ms ease both;
}

@keyframes gateFadeUp{from{opacity:0;transform:translate(-50%,14px);}to{opacity:1;transform:translate(-50%,0);}}

.gate-title{
  text-align:center;
  font-size:20px;
  color:#111827;
  margin-bottom:14px;
  letter-spacing:0.02em;
}

.gate-row{
  display:flex;
  gap:10px;
  align-items:stretch;
}

.gate-input{
  flex:1;
  min-width:0;
  height:44px;
  padding:10px 12px;
  border:1px solid #d1d5db;
  border-radius:10px;
  font-size: 16px;
  line-height: 1.2;
  background:#fff;
  box-sizing:border-box;
}

.gate-input:focus{
  outline:none;
  border-color:#3b82f6;
  box-shadow:0 0 0 3px rgba(59,130,246,0.12);
}

.gate-btn{
  height:44px;
  padding:0 16px;
  border:none;
  border-radius:10px;
  background:#b89752;
  color:#fff;
  font-size:15px;
  cursor:pointer;
  white-space:nowrap;
}

.gate-btn:disabled{opacity:.65;cursor:not-allowed;}

.gate-msg{
  min-height:18px;
  margin-top:10px;
  text-align:center;
  font-size:13px;
  color:#b91c1c;
}

.gate-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:none;
  z-index:2;
  background:#000;
}

.gate-overlay.is-playing .gate-video{display:block;}
.gate-overlay.is-exiting{animation: gateFadeOut 650ms ease both;}
@keyframes gateFadeOut{from{opacity:1;}to{opacity:0;}}

html.gate-locked, body.gate-locked{
  overflow:hidden !important;
  height:100%;
}

@media (max-width:768px){
  .gate-ui{ bottom:16vh; padding:18px 18px 14px; }
}