/* ════════════════════════════════════════════
   EARTH.ONLINE — Intercept / 拦截页样式
   职责分离自 intercept.html
   ════════════════════════════════════════════ */

/* 全屏遮罩 */
.intercept-mask{
  position:fixed;inset:0;z-index:200;
  background:#000;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  animation:interceptFadeIn .8s ease;
}
@keyframes interceptFadeIn{
  from{opacity:0}
  to{opacity:1}
}

.intercept-content{
  max-width:600px;width:100%;text-align:center;
}

/* ── 步进动画 ── */
.intercept-content > *{
  opacity:0;
  transform:translateY(8px);
  animation:interceptStepIn .5s ease forwards;
}
.intercept-console{animation-delay:.1s}
.intercept-title{animation-delay:.5s}
.intercept-sub{animation-delay:.85s}
.intercept-actions{animation-delay:1.15s}
@keyframes interceptStepIn{
  to{opacity:1;transform:translateY(0)}
}

/* 控制台行 */
.intercept-console{
  font-family:var(--mono);
  font-size:clamp(13px,2.2vw,16px);
  color:var(--ink-1);
  letter-spacing:.08em;
  margin-bottom:40px;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.intercept-console .cursor-blink{
  color:var(--rust-3);
  animation:cursorBlink .8s step-end infinite;
  font-weight:600;
}
@keyframes cursorBlink{0%,100%{opacity:1}50%{opacity:0}}
.intercept-console .prompt{color:var(--rust-3);font-weight:500}
.intercept-console .msg{color:var(--ink-0)}

/* 主标题 */
.intercept-title{
  font-family:var(--cn);font-weight:500;
  font-size:clamp(28px,4.6vw,48px);
  color:var(--ink-0);
  line-height:1.2;
  margin-bottom:16px;
}
.intercept-title .accent{color:var(--rust-3)}

/* 副标题 */
.intercept-sub{
  font-family:var(--cn);
  font-size:clamp(14px,1.8vw,17px);
  color:var(--ink-1);
  line-height:1.7;
  margin-bottom:48px;
  max-width:420px;
  margin-left:auto;
  margin-right:auto;
}

/* 按钮区 */
.intercept-actions{
  display:flex;justify-content:center;gap:14px;flex-wrap:wrap;
}
.intercept-content.is-login-mode .intercept-actions{display:none}

.intercept-login-form{
  display:grid;
  gap:12px;
  max-width:500px;
  margin:22px auto 0;
  padding:16px;
  border:1px solid var(--line-2);
  background:rgba(255,255,255,.035);
  text-align:left;
}
.intercept-login-form[hidden]{display:none}
#loginPasswordWrap[hidden],
#loginCodeWrap[hidden]{display:none}
.intercept-login-form label{
  display:grid;
  gap:7px;
  font-family:var(--mono);
  font-size:10px;
  color:var(--ink-2);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.intercept-login-form input{
  width:100%;
  border:1px solid var(--line-2);
  background:rgba(0,0,0,.36);
  color:var(--ink-0);
  padding:12px 13px;
  border-radius:2px;
  font:500 14px var(--cn);
  outline:none;
}
.intercept-login-form input:focus{
  border-color:var(--rust-3);
  box-shadow:0 0 0 3px rgba(204,0,0,.12);
}
.intercept-login-form .login-form-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:2px;
}
.intercept-login-form .login-hint{
  font-family:var(--cn);
  font-size:12px;
  color:var(--ink-2);
  line-height:1.6;
}
.login-mode-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.login-mode-tabs button{
  border:1px solid var(--line-2);
  background:rgba(255,255,255,.025);
  color:var(--ink-2);
  padding:10px 12px;
  font:600 11px var(--mono);
  letter-spacing:.1em;
  cursor:pointer;
}
.login-mode-tabs button.active{border-color:var(--rust-3);color:var(--ink-0);background:rgba(204,0,0,.08)}
.login-code-row{display:grid;grid-template-columns:1fr auto;gap:8px}
.login-code-row button{white-space:nowrap}
.login-policy-check{
  display:grid !important;
  grid-template-columns:auto 1fr;
  align-items:start;
  gap:10px !important;
  padding:12px;
  border:1px dashed var(--line-2);
  background:rgba(255,255,255,.02);
  cursor:pointer;
}
.login-policy-check input{width:auto;margin-top:4px;accent-color:var(--rust)}
.login-policy-check span{
  font-family:var(--cn);
  font-size:12px;
  line-height:1.65;
  color:var(--ink-1);
  letter-spacing:0;
  text-transform:none;
}
.login-alt-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding-top:4px;
}
.login-alt-actions .btn{flex:1 1 180px;justify-content:center}

/* 登出/告辞后的反馈文字 */
.intercept-feedback{
  font-family:var(--cn);
  font-size:14px;
  color:var(--ink-1);
  line-height:1.8;
  margin-top:24px;
  min-height:48px;
  transition:all .3s ease;
}
.intercept-feedback .icon{
  display:inline-block;
  margin-right:8px;
  font-family:var(--mono);
  color:var(--amber);
}

/* 告辞按钮的三个阶段 */
#btn-quit.phase-1{opacity:0.5;border-color:var(--ink-2);color:var(--ink-2);cursor:default;pointer-events:none}
#btn-quit.phase-2{animation:quitShake .4s ease;opacity:0.35;border-color:var(--ink-3);color:var(--ink-3);cursor:default;pointer-events:none}
.login-alt-actions .btn.phase-1{opacity:.5;border-color:var(--ink-2);color:var(--ink-2);cursor:default;pointer-events:none}
@keyframes quitShake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-4px)}
  40%{transform:translateX(4px)}
  60%{transform:translateX(-3px)}
  80%{transform:translateX(3px)}
}
#btn-quit.hidden{display:none}

/* 登录按钮被按后的激励感 */
#btn-login.clicked,
#btn-existing.clicked{
  border-color:var(--green);
  color:var(--green);
  background:rgba(90,155,106,.1);
  animation:loginPulse 1.2s ease 2;
}
@keyframes loginPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(90,155,106,.3)}
  50%{box-shadow:0 0 0 12px rgba(90,155,106,0)}
}

/* 成就弹窗 */
.intercept-achievement{
  margin-top:24px;
  padding:12px 18px;
  border:1px dashed var(--amber);
  display:inline-block;
  font-family:var(--mono);
  font-size:11px;
  color:var(--amber);
  letter-spacing:.14em;
  animation:achieveFade .5s ease;
}
@keyframes achieveFade{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

/* 底部小字提示 + 低矮屏幕隐藏 */
.intercept-footnote{
  position:fixed;
  bottom:24px;
  left:50%;transform:translateX(-50%);
  font-family:var(--mono);
  font-size:10px;
  color:var(--ink-3);
  letter-spacing:.16em;
  text-align:center;
  transition:opacity .3s;
}
@media(max-height:600px){
  .intercept-footnote{opacity:0;pointer-events:none}
}

/* 底部「回到主世界」链接 */
.intercept-escape{
  position:fixed;
  bottom:48px;
  left:50%;transform:translateX(-50%);
  font-family:var(--mono);
  font-size:12px;
  color:var(--ink-3);
  opacity:.15;
  letter-spacing:.12em;
  cursor:pointer;
  transition:opacity .3s;
  text-decoration:none;
  z-index:201;
}
.intercept-escape:hover{opacity:.5}
.login-page-mode .intercept-escape{display:none}
@media(max-width:640px){
  .intercept-escape{bottom:44px}
}
@media(max-height:600px){
  .intercept-escape{display:none}
}

/* 移动端适配 */
@media(max-width:640px){
  .intercept-actions .btn.btn,.intercept-actions .btn.btn.primary,.intercept-actions .btn.btn.ghost{
    padding:18px 22px !important;
    min-width:0;
    width:100%;
  }
  .intercept-mask{padding:16px}
  .intercept-content{max-width:100%}
}