/* ============================================================
   steamAuth — 黑红主题
   纯黑底 + 猩红点缀，与蓝紫色调彻底区分
   ============================================================ */

:root {
    --bg: #0a0a0b;              /* 近纯黑背景 */
    --card: #131315;            /* 卡片深灰黑 */
    --card-edge: #26262a;       /* 卡片边框 */
    --border: #2a2a2e;
    --text: #eceaea;            /* 主文字（微暖白） */
    --muted: #9b9494;           /* 次级文字（暖灰） */
    --red: #e03131;             /* 主红 */
    --red-deep: #b02525;        /* 深红（hover） */
    --red-dark: #6e1717;        /* 暗红（边框/弱化） */
    --red-glow: rgba(224, 49, 49, 0.35);   /* 红色辉光 */
    --error: #ff5c5c;
    --ok: #f5c66a;              /* 成功提示的琥珀色（在黑红底上比绿色更协调） */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: -apple-system, "Segoe UI", "Microsoft YaHei", Roboto, sans-serif;
    background:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(224, 49, 49, 0.13), transparent 60%),
        radial-gradient(ellipse 60% 40% at 50% 110%, rgba(110, 23, 23, 0.10), transparent 60%),
        var(--bg);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 24px 12vh;   /* 底部留白加大：卡片整体上移，给浏览器地址栏/底栏让位 */
}

/* 卡片：黑底 + 顶部红色饰条 + 红色微光 */
.card {
    position: relative;
    background: linear-gradient(180deg, #17171a 0%, var(--card) 40%);
    border: 1px solid var(--card-edge);
    border-radius: 14px;
    padding: 44px 36px 36px;
    width: 100%;
    max-width: 420px;
    text-align: center;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(224, 49, 49, 0.06),
        0 18px 50px rgba(0, 0, 0, 0.55),
        0 0 90px rgba(224, 49, 49, 0.07);
}

.card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--red) 30%, #ff6b6b 50%, var(--red) 70%, transparent);
    box-shadow: 0 0 14px var(--red-glow);
}

h1 {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--text);
}

h1::after {
    content: "";
    display: block;
    width: 42px;
    height: 2px;
    margin: 12px auto 0;
    background: linear-gradient(90deg, transparent, var(--red), transparent);
}

.subtitle {
    color: var(--muted);
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.6;
}

.subtitle strong, .logged-info strong {
    color: #ff7b7b;
    word-break: break-all;
    font-weight: 600;
}

.logged-info {
    margin: 14px 0 4px;
    font-size: 14px;
    color: var(--muted);
}

form { margin-top: 24px; text-align: left; }

label {
    display: block;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 6px;
}

input[type="password"], .pw-wrap input {
    width: 100%;
    padding: 12px 14px;
    font-size: 15px;
    color: var(--text);
    background: #0d0d0f;
    border: 1px solid var(--border);
    border-radius: 8px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

input[type="password"]:focus, .pw-wrap input:focus {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(224, 49, 49, 0.15);
}

.error {
    color: var(--error);
    font-size: 12px;
    display: block;
    margin-top: 6px;
    min-height: 16px;
}

/* 主按钮：红色渐变 + 辉光 */
.button, button[type="submit"] {
    display: inline-block;
    width: 100%;
    margin-top: 20px;
    padding: 13px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #fff;
    background: linear-gradient(180deg, #ef4444 0%, var(--red) 55%, var(--red-deep) 100%);
    border: 1px solid rgba(255, 120, 120, 0.25);
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: filter .15s, box-shadow .15s, transform .05s;
    box-shadow: 0 4px 18px rgba(224, 49, 49, 0.25);
}

.button:hover, button[type="submit"]:hover {
    filter: brightness(1.1);
    box-shadow: 0 4px 26px var(--red-glow);
}

.button:active, button[type="submit"]:active { transform: translateY(1px); }

button[type="submit"]:disabled {
    background: var(--card-edge);
    border-color: var(--border);
    box-shadow: none;
    color: var(--muted);
    cursor: not-allowed;
}

.link-muted {
    display: inline-block;
    margin-top: 16px;
    font-size: 13px;
    color: var(--muted);
    text-decoration: none;
    width: 100%;
    transition: color .15s;
}

.link-muted:hover { color: #ff7b7b; }

/* 成功/提示框：琥珀色调（黑红底上的正向信息色） */
.notice {
    margin-top: 16px;
    padding: 10px 12px;
    font-size: 13px;
    color: var(--ok);
    background: rgba(245, 198, 106, 0.07);
    border: 1px solid rgba(245, 198, 106, 0.22);
    border-radius: 8px;
    line-height: 1.6;
    text-align: left;
}

/* 滚动条（黑红） */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--red-dark); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--red-deep); }

/* ============================================================
   品牌页脚：星河互娱出品 · 作者
   ============================================================ */
.brand {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 18px;
    text-align: center;
    font-size: 12.5px;
    letter-spacing: 1px;
    color: var(--muted);
    user-select: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.brand-name {
    color: #ff7b7b;
    font-weight: 700;
}

.brand-author {
    color: var(--text);
    font-weight: 600;
}

.brand-sep {
    margin: 0 6px;
    color: var(--red-dark);
}

/* ============================================================
   动态特效层
   ============================================================ */

/* 背景粒子画布：铺满全屏、不拦截鼠标、压在内容之下 */
.fx-canvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* 内容层压在粒子画布之上（.card 本身 relative，.brand 本身 fixed） */
.card { z-index: 1; }
.brand { z-index: 2; }

/* 卡片入场：浮升 + 淡入 */
.card {
    animation: cardRise 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}

@keyframes cardRise {
    from { opacity: 0; transform: translateY(26px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

/* 标题：红色辉光呼吸 */
h1 {
    animation: glowPulse 3.2s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { text-shadow: 0 0 8px rgba(224, 49, 49, 0.2); }
    50%      { text-shadow: 0 0 22px rgba(224, 49, 49, 0.65), 0 0 46px rgba(224, 49, 49, 0.25); }
}

/* 主按钮：缓慢的辉光呼吸 */
.button, button[type="submit"] {
    animation: btnPulse 2.6s ease-in-out infinite;
}

@keyframes btnPulse {
    0%, 100% { box-shadow: 0 4px 18px rgba(224, 49, 49, 0.22); }
    50%      { box-shadow: 0 4px 30px rgba(224, 49, 49, 0.5); }
}

.button:hover, button[type="submit"]:hover {
    animation-play-state: paused;
}

/* 卡片顶部饰条：流光扫过 */
.card::before {
    background-size: 200% 100%;
    animation: barFlow 5s linear infinite;
}

@keyframes barFlow {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* 尊重减弱动效偏好 */
/* 仅对环境循环动效（呼吸/光晕/旋转）生效；
   入场动画在 reduced-motion 下缩短到 0.4s（保留过渡感，不瞬时出现） */
@media (prefers-reduced-motion: reduce) {
    .card, h1, .button, button[type="submit"], .card::before,
    .soon-bgmark,
    .soon-emblem-aura, .soon-rings .ring, .soon-emblem-glow,
    .soon-headline-num::before,
    .soon-divider-line, .soon-divider-gem {
        animation-duration: 0.01s !important;
        animation-iteration-count: 1 !important;
    }
    .soon-logo, .soon-headline-num, .soon-tagline {
        animation-duration: 0.4s !important;
    }
}

/* ============================================================
   语言切换器（右上角固定）+ 顶部导航（验证/预告，在语言框左边）
   ============================================================ */
.topbar {
    position: fixed;
    top: 14px;
    right: 16px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 10px;
}

.lang-box {
    position: static;   /* 由 .topbar 统一定位 */
}

/* 导航按钮：hover 半透明底 + 下划线；当前页常亮下划线 */
.nav-btn {
    font-size: 12.5px;
    letter-spacing: 0.5px;
    color: var(--text);
    text-decoration: none;
    padding: 7px 11px;
    border-radius: 8px;
    border: 0;
    background: transparent;
    transition: background .15s, color .15s;
}

.nav-btn:hover {
    background: rgba(224, 49, 49, 0.15);
    color: #ff7b7b;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.nav-btn.active {
    color: #ff7b7b;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ============================================================
   预告页（Coming Soon）— 「FORGED · 锻炉铭文」v3 重制
   概念：黑铁锻炉中央悬起 LOGO 徽记，下方悬铭文条幅；
         三环缓慢反向旋转、底部炽光、罗马数字眉题、红宝石斩线。
   ============================================================ */
/* 预告页：锁定一屏，不出滚动条 */
body:has(.soon-stage) {
    padding: 0;
    overflow: hidden;
    display: block;
}

.soon-stage {
    position: relative;
    z-index: 1;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;        /* 整体垂直居中 */
    text-align: center;
    background:
        radial-gradient(ellipse 70% 42% at 50% 56%, rgba(255, 110, 70, 0.30) 0%, transparent 60%),
        radial-gradient(ellipse 60% 35% at 50% 105%, rgba(110, 23, 23, 0.22) 0%, transparent 60%);
}

/* 视差层（由 soon-fx.js 驱动，transform 在 JS 里叠加） */
.soon-layer { will-change: transform; position: relative; z-index: 1; }
.soon-layer:last-child { margin-top: 4vh; }   /* LOGO 与铭文拉开 */

/* LOGO + 铭文整个堆叠块——整体略向上偏移（动画仅作用于可见内容，不影响 .soon-rings） */
.soon-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -7vh;
}

/* ---------- 背景 LOGO 水印 ---------- */
.soon-bgmark {
    position: absolute;
    left: 50%;
    top: 58%;
    transform: translate(-50%, -50%);
    width: min(1900px, 150vw);
    height: min(1900px, 150vw);
    background: url("/image/logo.png") center / contain no-repeat;
    opacity: 0.07;
    filter: blur(12px);
    pointer-events: none;
    z-index: 0;
    animation: bgmarkPulse 9s ease-in-out infinite;
}

@keyframes bgmarkPulse {
    0%, 100% { opacity: 0.06; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 0.09; transform: translate(-50%, -50%) scale(1.02); }
}

/* ---------- 主视觉（徽记） ---------- */
.soon-emblem {
    position: relative;
    display: inline-block;
}

/* 大面积熔炉光晕：3 层叠加，与余烬同频呼吸 */
.soon-emblem-aura {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 170%;
    aspect-ratio: 1;
    background:
        radial-gradient(circle, rgba(255, 120, 70, 0.26) 0%, transparent 32%),
        radial-gradient(circle, rgba(224, 49, 49, 0.38) 28%, transparent 58%),
        radial-gradient(circle, rgba(176, 37, 37, 0.14) 52%, transparent 78%);
    filter: blur(10px);
    pointer-events: none;
    animation: auraPulse 4.2s ease-in-out infinite;
}

@keyframes auraPulse {
    0%, 100% { opacity: 0.65; transform: translate(-50%, -50%) scale(0.94); }
    50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.08); }
}

/* 三环反向旋转：舞台绝对居中（脱离 LOGO 位置）
   用 mask 仅露出一个弧段，扫掠出"火环"效果；几何中心贴合 50%/50% */
.soon-rings {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.4);
    opacity: 0;
    width: min(1180px, 76vw);          /* 再大一圈，覆盖 LOGO + 2026 整体 */
    aspect-ratio: 1;
    pointer-events: none;
    z-index: 1;                        /* 在 bgmark 上，在 LOGO/字下 */
    animation: ringsIn 2.6s cubic-bezier(0.22, 1, 0.36, 1) 0s forwards;
}

.soon-rings .ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid transparent;
    -webkit-mask-image: radial-gradient(circle, transparent 50%, black 56%, black 68%, transparent 74%);
            mask-image: radial-gradient(circle, transparent 50%, black 56%, black 68%, transparent 74%);
}

.soon-rings .ring-1 {
    border-color: rgba(224, 49, 49, 0.42);
    animation: ringSpin 24s linear infinite;
}
.soon-rings .ring-2 {
    inset: 6%;
    border-color: rgba(255, 140, 90, 0.30);
    animation: ringSpin 34s linear infinite reverse;
}
.soon-rings .ring-3 {
    inset: 12%;
    border-color: rgba(180, 50, 50, 0.35);
    animation: ringSpin 18s linear infinite;
}

@keyframes ringSpin {
    to { transform: rotate(360deg); }
}

/* 三环入场：从小放大到 1，再交给子元素 ringSpin 持续旋转 */
@keyframes ringsIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1);   }
}

/* LOGO 底部炽光：紧贴剑刃下方，模拟"刃下余烬" */
.soon-emblem-glow {
    position: absolute;
    left: 50%;
    bottom: -10%;
    transform: translate(-50%, 0);
    width: 78%;
    height: 38%;
    background: radial-gradient(ellipse at center,
        rgba(255, 120, 70, 0.65) 0%,
        rgba(224, 49, 49, 0.25) 50%,
        transparent 75%);
    filter: blur(10px);
    pointer-events: none;
    animation: glowPulse 3.6s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.7; transform: translate(-50%, 0) scaleX(0.9); }
    50%      { opacity: 1;   transform: translate(-50%, 0) scaleX(1.12); }
}

/* LOGO 外层：只负责循环浮动（infinite），与入场动画彻底分离，避免属性冲突闪灭 */
.soon-logo-float {
    position: relative;
    z-index: 2;
    width: min(900px, 60vw);
    /* 循环动画 0% 与 100% 都是 translateY(0)，从页面加载即生效，无跳变 */
    animation: logoFloat 6s ease-in-out infinite;
}

/* LOGO 内层主体：只负责一次性入场，forwards 永久停住终态 */
.soon-logo {
    display: block;
    width: 100%;
    /* 显式初始态：入场前完全隐藏，不依赖 fill-mode 覆盖 */
    opacity: 0;
    transform: translateY(-60px);
    filter:
        brightness(1.20)
        drop-shadow(0 0 18px rgba(255, 165, 125, 0.78))
        drop-shadow(0 0 42px rgba(255, 130,  90, 0.62))
        drop-shadow(0 0 88px rgba(255, 100,  60, 0.38))
        drop-shadow(0 16px 34px rgba(0, 0, 0, 0.70));
    animation: logoIn 3s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}

/* LOGO：从上方"落入"——translateY -60 → 0 + 淡入，forwards 保持终态不再回落 */
@keyframes logoIn {
    from { opacity: 0; transform: translateY(-60px); }
    to   { opacity: 1; transform: translateY(0);     }
}

@keyframes logoFloat {
    0%, 100% { transform: translateY(0)    rotate(0deg); }
    50%      { transform: translateY(-10px) rotate(0.4deg); }
}

/* ---------- 铭文条幅 ---------- */
.soon-inscription {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 眉题：罗马数字小标（系统衬线字体，保持古籍感） */
.soon-eyebrow {
    display: none;
}

/* 2026 外层：只负责循环浮动（infinite），避免与入场动画共属性冲突 */
.soon-headline {
    position: relative;
    margin-top: 0;
    perspective: 1200px;
    animation:
        yearBob  6.5s ease-in-out infinite,
        yearGlow 4s   ease-in-out infinite;
}

.soon-headline-num {
    position: relative;
    display: inline-block;
    font-family: "Cinzel", "Trajan Pro", "Times New Roman", serif;
    font-size: clamp(110px, 15vw, 220px);
    font-weight: 900;
    letter-spacing: clamp(6px, 1vw, 18px);
    text-indent: clamp(6px, 1vw, 18px);
    line-height: 1;
    transform-origin: 50% 60%;
    /* 显式初始态：入场前完全隐藏（不依赖 fill-mode） */
    opacity: 0;
    transform: rotateX(6deg) scale(1.4);
    filter: blur(6px);
    color: #ff9a9a;                              /* 与 .soon-tagline 同色，建立"统一铭文条幅" */
    /* 2026 与下方"红线 + COMING SOON"协同的纵向色带：
       上段呼应 COMING SOON 的粉（PINK），中段过渡到斩线 --red 的红，
       底段落入宝石 / 红线尾端的 --red-dark，与红线 / 宝石同一套红色梯度 */
    background: linear-gradient(180deg,
        #fff0ea 0%,
        #ffd0d0 14%,
        #ff9a9a 30%,
        #ff7a78 46%,
        #e03131 62%,
        #a82828 80%,
        #6e1717 100%);
    background-size: 100% 100%;
    background-position: 0 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* 字清晰优先——去掉外发光，只留极轻近光提亮边缘对比 */
    text-shadow: 0 0 1px rgba(255, 200, 180, 0.25);
    /* 内层只跑一次性入场，forwards 永久停住终态；旋转/呼吸并入下方动画 */
    animation: yearIn 3s cubic-bezier(0.22, 1, 0.36, 1) 0.8s forwards;
    will-change: transform, filter;
}

/* 流光扫过：纯白带 + screen 混合，把钢字局部"刷亮" */
.soon-headline-num::before {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
        transparent 0%,
        rgba(255, 252, 245, 0) 38%,
        rgba(255, 255, 255, 0.70) 50%,
        rgba(255, 252, 245, 0) 62%,
        transparent 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    pointer-events: none;
    mix-blend-mode: screen;
    animation: shineSweepText 5.8s linear 1.7s infinite;
}

@keyframes shineSweepText {
    0%   { background-position: 110% 0; }
    100% { background-position: -130% 0; }
}

/* 2026 从大到小"落入"——scale-down 入场，rotateX(6deg) 始终保持 */
@keyframes yearIn {
    from { opacity: 0; transform: rotateX(6deg) scale(1.4); filter: blur(6px); }
    60%  { opacity: 1;                                              filter: blur(0); }
    to   { opacity: 1; transform: rotateX(6deg) scale(1);   filter: blur(0); }
}

/* 外层循环：仅平移，不动 rotateX（内层已锁定 rotateX），避免与外层嵌套冲突 */
@keyframes yearBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* 外层呼吸：只调亮度，放外层（与 yearBob 的 transform 不冲突） */
@keyframes yearGlow {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.10); }
}

/* 红宝石斩线：两段线从中心向两侧画出，中间嵌一颗旋转红宝石 */
.soon-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(720px, 72vw);
    margin: 3.6vh auto 3.2vh;
    gap: 16px;
}

.soon-divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
        transparent, var(--red-dark) 22%, var(--red) 50%, var(--red-dark) 78%, transparent);
    box-shadow: 0 0 8px var(--red-glow), 0 0 18px rgba(224, 49, 49, 0.22);
    opacity: 0;
    animation:
        divDraw 1.4s cubic-bezier(0.7, 0, 0.3, 1) 2.4s forwards,
        divPulse 4s ease-in-out 4.0s infinite;
}

.soon-divider-line:nth-child(1) { transform-origin: right center; }
.soon-divider-line:nth-child(3) { transform-origin: left center; }

@keyframes divDraw {
    from { opacity: 0; transform: scaleX(0); }
    to   { opacity: 1; transform: scaleX(1); }
}

@keyframes divPulse {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.6) drop-shadow(0 0 6px rgba(255, 120, 80, 0.5)); }
}

.soon-divider-gem {
    width: 9px;
    height: 9px;
    background: linear-gradient(135deg, #ff8a6b 0%, var(--red) 50%, #6e1717 100%);
    transform: rotate(45deg) scale(0);
    box-shadow: 0 0 14px var(--red), 0 0 28px var(--red-glow);
    opacity: 0;
    animation:
        gemAppear 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 2.8s forwards,
        gemPulse  2.4s ease-in-out 3.6s infinite;
}

@keyframes gemAppear {
    from { opacity: 0; transform: rotate(45deg) scale(0); }
    to   { opacity: 1; transform: rotate(45deg) scale(1); }
}

@keyframes gemPulse {
    0%, 100% {
        box-shadow:
            0 0 14px var(--red),
            0 0 28px var(--red-glow);
        transform: rotate(45deg) scale(1);
    }
    50% {
        box-shadow:
            0 0 22px var(--red),
            0 0 44px var(--red),
            0 0 72px var(--red-glow);
        transform: rotate(225deg) scale(1.15);
    }
}

/* COMING SOON：与 2026 同样的色板，统一"铭文条幅"——同样去除外发光 */
.soon-tagline {
    font-family: "Cinzel", "Trajan Pro", "Times New Roman", serif;
    font-size: clamp(26px, 3.2vw, 42px);
    font-weight: 600;
    color: #ff9a9a;
    background: linear-gradient(180deg,
        #fff0ea 0%,
        #ffd0d0 22%,
        #ff9a9a 55%,
        #d97878 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 0.6em;
    text-indent: 0.6em;
    /* 与 2026 同样的紧凑红光（参考细线斩线） */
    text-shadow:
        0 0 8px  rgba(255, 120, 80, 0.55),
        0 0 22px rgba(224,  49, 49, 0.28);
    /* 显式初始态：入场前完全隐藏 */
    opacity: 0;
    transform: translateY(32px);
    filter: blur(4px);
    /* 入场(transform+opacity)与呼吸(text-shadow)属性错开，互不覆盖，避免闪灭 */
    animation:
        tagIn    3s cubic-bezier(0.22, 1, 0.36, 1) 1.4s forwards,
        tagGlow  4s   ease-in-out infinite;
}

/* COMING SOON：从下方"浮上"——translateY +32 → 0（更大幅度更明显） */
@keyframes tagIn {
    from { opacity: 0; transform: translateY(32px); filter: blur(4px); }
    to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

/* 与 yearGlow 同节奏的紧凑脉冲：只用 text-shadow，不动 filter（与 tagIn 的 transform/opacity 属性错开） */
@keyframes tagGlow {
    0%, 100% { text-shadow: 0 0 8px rgba(255, 120, 80, 0.55), 0 0 22px rgba(224, 49, 49, 0.28); }
    50%      { text-shadow: 0 0 14px rgba(255, 130, 90, 0.80), 0 0 34px rgba(224, 49, 49, 0.45); }
}

/* 左上角地图标牌 */
.map-badge {
    position: fixed;
    top: 16px;
    left: 18px;
    z-index: 10;
    font-size: 12.5px;
    letter-spacing: 0.5px;
    user-select: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    max-width: calc(100vw - 150px);
}

.map-a { color: #ff7b7b; font-weight: 600; }
.map-sep { color: var(--muted); margin: 0 5px; }
.map-b { color: #f5c66a; font-weight: 600; }

.lang-box select {
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--card-edge);
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 12.5px;
    outline: none;
    cursor: pointer;
    transition: border-color .15s;
}

.lang-box select:hover { border-color: var(--red-dark); }

/* 自绘下拉（国旗 + 语言名） */
.lang-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--card-edge);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12.5px;
    cursor: pointer;
    transition: border-color .15s;
}

.lang-btn:hover { border-color: var(--red-dark); }

.lang-btn .caret { color: var(--muted); font-size: 10px; }

.flag {
    width: 20px;
    height: 13px;
    display: block;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.lang-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--card);
    border: 1px solid var(--card-edge);
    border-radius: 8px;
    padding: 4px;
    min-width: 138px;
    display: none;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
}

.lang-box.open .lang-menu { display: block; }

.lang-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 9px;
    background: none;
    border: 0;
    border-radius: 6px;
    color: var(--text);
    font-size: 12.5px;
    cursor: pointer;
    text-align: left;
    transition: background .12s;
}

.lang-item:hover { background: rgba(224, 49, 49, 0.12); }
.lang-item.active { color: #ff7b7b; }

/* ============================================================
   密码框明文切换（眼睛按钮）
   ============================================================ */
.pw-wrap { position: relative; }

.pw-wrap input { padding-right: 44px; }

.eye {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--muted);
    padding: 6px;
    line-height: 0;
    transition: color .15s;
}

.eye:hover { color: #ff7b7b; }
.eye svg { display: block; }