/* =========================================================
   邀请密钥入口 —— 沿用游戏的「深夜档案」视觉
   ========================================================= */
.gate{
  position:fixed;inset:0;z-index:9000;
  display:flex;align-items:center;justify-content:center;
  padding:calc(24px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));
  overflow-y:auto;
  background:
    radial-gradient(620px 380px at 50% 30%, rgba(140,44,67,.26), transparent 70%),
    radial-gradient(500px 400px at 100% 110%, rgba(201,167,116,.08), transparent 60%),
    var(--bg);
  animation:fade .5s ease;
}
.gate[hidden]{display:none}
.gate::before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.6;
  background-image:repeating-linear-gradient(105deg, rgba(255,240,226,.022) 0 1px, transparent 1px 9px);
  mask-image:linear-gradient(180deg,#000,transparent 80%);-webkit-mask-image:linear-gradient(180deg,#000,transparent 80%);
}
.gate-card{
  position:relative;width:100%;max-width:380px;margin:auto;text-align:center;
  padding:40px 26px 26px;border-radius:28px;
  background:
    radial-gradient(320px 160px at 50% 0, rgba(201,80,107,.14), transparent 70%),
    linear-gradient(180deg, rgba(31,22,25,.92), rgba(18,13,15,.94));
  border:1px solid var(--line-strong);
  box-shadow:0 40px 100px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.015) inset;
  animation:up .6s var(--ease);
}
/* 四角细线，像一封封了蜡的邀请函 */
.gate-card::before,.gate-card::after{
  content:"";position:absolute;width:22px;height:22px;pointer-events:none;
  border-color:var(--line-gold);border-style:solid;
}
.gate-card::before{top:14px;left:14px;border-width:1px 0 0 1px;border-top-left-radius:8px}
.gate-card::after{bottom:14px;right:14px;border-width:0 1px 1px 0;border-bottom-right-radius:8px}

.gate .seal{
  position:relative;width:76px;height:76px;margin:0 auto 22px;border-radius:50%;
  background:radial-gradient(circle at 38% 34%, #f6e9d3 0%, #d9bf94 40%, #8f6d45 75%, #3a2618 100%);
  box-shadow:0 0 40px rgba(217,191,148,.26), 0 0 120px rgba(140,44,67,.4);
  transition:transform .8s var(--ease), box-shadow .8s;
}
.gate .seal::after{
  content:"";position:absolute;inset:-1px;border-radius:50%;
  background:radial-gradient(circle at 76% 38%, #1a1215 0 47%, transparent 48%);
  transition:transform 1s var(--ease), opacity 1s;
}
.gate .g-en{font-family:var(--display);font-style:italic;font-size:14px;letter-spacing:.34em;color:var(--gold);margin-left:.34em}
.gate h1{
  margin:8px 0 0 .2em;font-family:var(--serif);font-weight:900;font-size:34px;letter-spacing:.2em;line-height:1.25;
  color:var(--gold2);
  background:linear-gradient(180deg,#fbf1df 20%,#c9a774 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.gate .g-lede{margin-top:12px;font-size:13px;color:var(--ink-dim);letter-spacing:.12em;line-height:1.8}
.gate .g-rule{width:140px;height:1px;margin:26px auto 24px;background:linear-gradient(90deg,transparent,var(--line-gold),transparent)}

.gate form{text-align:left}
.gate .g-label{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--ink-dim);margin-bottom:10px}
.gate .g-label span{font-weight:400;letter-spacing:.04em;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.gate .g-field{position:relative}
.gate input.g-code{
  width:100%;height:58px;padding:0 14px;
  -webkit-user-select:text;user-select:text;-webkit-touch-callout:default;
  font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;font-size:20px;font-weight:500;
  letter-spacing:.16em;text-align:center;text-transform:uppercase;
  color:var(--gold2);caret-color:var(--gold);
  background:rgba(8,5,6,.6);
  border:1px solid var(--line-strong);border-radius:16px;outline:none;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.gate input.g-code::placeholder{color:rgba(255,226,206,.16);letter-spacing:.16em}
.gate input.g-code:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(201,167,116,.12), 0 0 30px -6px rgba(201,167,116,.35);background:rgba(8,5,6,.8)}
.gate .g-field.bad input.g-code{border-color:var(--bad);box-shadow:0 0 0 4px rgba(227,121,142,.12)}
.gate .g-field.bad{animation:shake .42s ease}
.gate .g-label{align-items:center}
.gate .g-paste{
  height:32px;padding:0 12px;border-radius:999px;
  display:inline-flex;align-items:center;gap:5px;
  font-size:13px;font-weight:500;letter-spacing:.06em;color:var(--gold2);
  background:rgba(201,167,116,.1);border:1px solid rgba(201,167,116,.28);cursor:pointer;
  transition:background .15s,border-color .15s,transform .15s;
}
.gate .g-paste svg{width:15px;height:15px}
.gate .g-paste:hover{background:rgba(201,167,116,.18);border-color:var(--gold)}
.gate .g-paste:active{transform:scale(.96)}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
.gate .g-dots{display:flex;justify-content:center;gap:5px;margin-top:12px}
.gate .g-dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,226,206,.1);transition:background .2s, box-shadow .2s}
.gate .g-dots i.on{background:var(--gold);box-shadow:0 0 6px rgba(201,167,116,.7)}
.gate .g-dots i.gap{margin-left:7px}
.gate .g-msg{min-height:22px;margin:10px 2px 4px;font-size:12.5px;line-height:1.6;color:var(--bad);text-align:center}
.gate .g-msg.ok{color:var(--gold2)}
.gate .btn.g-go{margin-top:4px;min-height:52px;border-radius:16px;font-size:16px;letter-spacing:.3em;padding-left:calc(16px + .3em)}
.gate .btn.g-go .spin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;animation:spin .8s linear infinite;display:none}
.gate .btn.g-go.busy .spin{display:inline-block}
.gate .btn.g-go.busy .tx{opacity:.8}
@keyframes spin{to{transform:rotate(360deg)}}
.gate .g-foot{margin-top:22px;font-size:11.5px;color:var(--ink-faint);letter-spacing:.08em;line-height:1.8}

/* 启封动画：月亮转为满月，卡片淡出 */
.gate.opening .seal{transform:scale(1.08);box-shadow:0 0 70px rgba(238,223,196,.5), 0 0 200px rgba(201,167,116,.35)}
.gate.opening .seal::after{transform:translateX(60%);opacity:0}
.gate.leaving{animation:gateOut .7s var(--ease) forwards}
@keyframes gateOut{to{opacity:0;transform:scale(1.02)}}

@media (max-width:360px){
  .gate-card{padding:34px 18px 22px}
  .gate h1{font-size:30px}
  .gate input.g-code{font-size:17px;letter-spacing:.12em}
}
.gate .g-label .g-paste span{color:inherit;font-weight:500;letter-spacing:.08em}