/**
 * PC 端公共样式：基础重置 / 容器 / 顶部导航 / 按钮 / 表单 / 提示条 / 页脚
 *
 * 风格基线见同目录 token.css。这里只放两端、多页面共用的东西，
 * 页面专属样式分别在 index.css、game.css、auth.css。
 */

/* ===== 基础 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.5;
    color: var(--t1);
    background: var(--bg-2);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul, ol { list-style: none; }
button { font-family: inherit; }

.site-main { flex: 1; }

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

/* ===== 字阶（收紧字距是苹果标题的辨识度来源） ===== */
.h-display { font-size: 48px; line-height: 1.08; font-weight: 600; letter-spacing: -.022em; }
.h1 { font-size: 32px; line-height: 1.12; font-weight: 600; letter-spacing: -.015em; }
.h2 { font-size: 24px; line-height: 1.17; font-weight: 600; letter-spacing: -.01em; }
.h3 { font-size: 19px; line-height: 1.21; font-weight: 600; letter-spacing: -.01em; }
.lead { font-size: 19px; line-height: 1.5; color: var(--t2); }
.small { font-size: 13px; color: var(--t2); }
.cap { font-size: 12px; color: var(--t3); }
.eyebrow { font-size: 13px; font-weight: 500; color: var(--accent); letter-spacing: .2px; }

/* ===== 顶部导航（毛玻璃常驻） ===== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--nav-h);
    background: rgba(255, 255, 255, .72);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--line-soft);
}
/* 滚动后加深底部投影，让导航从内容里"浮"出来（is-scrolled 由 header.js 添加） */
.site-header.is-scrolled {
    border-bottom-color: transparent;
    box-shadow: 0 1px 0 var(--line-soft), 0 6px 24px rgba(0, 0, 0, .06);
}
.header-inner { display: flex; align-items: center; height: 100%; gap: 28px; }

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--t1);
    flex: none;
    transition: opacity .2s;
}
.brand:hover { opacity: .82; }

/* 平台 Logo：老站素材 161x59 / 200x60 不等，统一按高度收敛、宽度自适应 */
.brand-logo {
    height: 40px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    flex: none;
}
/* 缺 Logo 的渠道：用站名首字做品牌块兜底 */
.brand-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--accent);
    color: #fff;
    font-size: 19px;
    font-weight: 600;
    flex: none;
}
.brand-name { white-space: nowrap; }

.main-nav { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.nav-link {
    position: relative;
    padding: 10px 16px;
    border-radius: var(--r-p);
    font-size: 14px;
    color: var(--t2);
    transition: color .2s, background .2s;
}
.nav-link:hover { color: var(--t1); background: var(--bg-2); }
.nav-link.is-active { color: var(--accent); font-weight: 500; }
.nav-link.is-active::after {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: -2px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
}

.header-user { margin-left: auto; display: flex; align-items: center; gap: 12px; }
/* 顶栏加厚后按钮同步放大一点，免得夹在 72px 里显得小气 */
/* ===== 徽标内的图标 / 拉丁字（首页与选区页共用） =====
   热badge：火苗描边图标；新badge：细体宽字距 NEW，清新感靠字距和轻字重，
   不引 webfont（为一个字加载体积不值） */
.badge { display: inline-flex; align-items: center; }
.badge .flame {
    width: 12px;
    height: 12px;
    flex: none;
    display: block;
    stroke: currentColor;
}
.badge .bd-latin {
    font-size: 10px;
    font-weight: 300;
    letter-spacing: .16em;
    margin-right: -.16em; /* 抵消末字符字距，视觉居中 */
    line-height: 1;
}

/* ===== 客服精灵（悬浮右下角，hover / 点击弹开面板） =====
   一只 Apple 风的小机器人：白身子 + accent 蓝天线，轻飘、眨眼、星光、呼吸光环。
   全部纯 CSS/SVG 动画，不依赖 transform-box 等新属性（登录器老内核可开本站页面）。 */
.kf-widget {
    position: fixed;
    /* 站位：屏幕 80% 宽、90% 高（下沿留 10%） */
    right: 20%;
    bottom: 10%;
    z-index: 900; /* 低于钱包弹窗 wmodal，弹窗打开时挂件被盖住是正确行为 */
}

/* —— 精灵本体（FAB） ——
   不加外圈特效：圈大内容小反而看不清，靠本体动画 + hover 反馈表达「能交互」 */
.kf-fab {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin-left: auto;
    border: 1px solid #cfe4fb;
    border-radius: var(--r-p);
    background: linear-gradient(165deg, #f4f9ff 0%, #e1efff 100%);
    box-shadow: 0 12px 30px rgba(0, 113, 227, .22), 0 3px 10px rgba(0, 0, 0, .08);
    cursor: pointer;
    font-family: inherit;
    transition: transform .25s ease, box-shadow .25s ease;
}
.kf-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 18px 40px rgba(0, 113, 227, .32), 0 6px 16px rgba(0, 0, 0, .12);
}
.kf-fab:hover .kf-bot { transform: scale(1.08) rotate(-4deg); }
.kf-bot {
    width: 68px;
    height: 68px;
    display: block;
    transition: transform .25s ease;
    animation: kfFloat 3.4s ease-in-out infinite; /* 精灵整体轻飘 */
}
/* 天线小球：跟身体同频但稍滞后，像被带着点头 */
.kf-ant { animation: kfAnt 3.4s ease-in-out infinite; }
/* 眨眼：睁眼 / 弯眼两组轮流显隐（不用 transform-box，老内核兼容） */
.kf-eye-open  { animation: kfBlinkOpen 4.2s ease-in-out infinite; }
.kf-eye-closed { opacity: 0; animation: kfBlinkClosed 4.2s ease-in-out infinite; }
/* 面板打开 = 笑眼弧线常驻 */
.kf-widget.is-open .kf-eye-open { animation: none; opacity: 0; }
.kf-widget.is-open .kf-eye-closed { animation: none; opacity: 1; }

/* —— 环绕星光 —— */
.kf-spark {
    position: absolute;
    font-style: normal;
    font-size: 12px;
    line-height: 1;
    color: var(--accent);
    text-shadow: 0 0 6px rgba(0, 113, 227, .35);
    opacity: 0;
    pointer-events: none;
    animation: kfTwinkle 3s ease-in-out infinite;
}
.kf-spark.s1 { top: -4px; left: 0; }
.kf-spark.s2 { top: 8px; right: -8px; font-size: 9px; color: var(--green); animation-delay: 1s; }
.kf-spark.s3 { bottom: 6px; left: -10px; font-size: 10px; animation-delay: 2s; }

/* —— 常驻气泡标签（和精灵同相位轻飘） —— */
.kf-tag {
    position: absolute;
    right: 90px;
    bottom: 26px;
    padding: 7px 13px;
    border-radius: var(--r-p);
    background: #fff;
    border: 1px solid var(--line-soft);
    box-shadow: var(--sh-1);
    font-size: 12px;
    color: var(--t2);
    white-space: nowrap;
    pointer-events: none;
    animation: kfFloat 3.4s ease-in-out infinite;
}
.kf-tag::after {
    content: "";
    position: absolute;
    right: -5px;
    bottom: 9px;
    width: 9px;
    height: 9px;
    background: #fff;
    border-top: 1px solid var(--line-soft);
    border-right: 1px solid var(--line-soft);
    transform: rotate(45deg);
}

/* —— 面板：加宽横排（左联系方式 / 右二维码），弹簧入场 + 小尾巴 —— */
.kf-panel {
    position: absolute;
    right: 0;
    bottom: 94px;
    width: 440px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-l);
    box-shadow: var(--sh-2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(.94);
    transform-origin: 100% 100%;
    transition: opacity .24s cubic-bezier(.34, 1.56, .64, 1),
                transform .24s cubic-bezier(.34, 1.56, .64, 1),
                visibility .24s;
    pointer-events: none;
}
.kf-panel::after {
    content: "";
    position: absolute;
    right: 24px;
    bottom: -6px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-right: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    transform: rotate(45deg);
}
.kf-widget:hover .kf-panel,
.kf-widget.is-open .kf-panel {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
}
/* 面板内容逐项弹入（打开时才播） */
.kf-widget:hover .kf-body > *,
.kf-widget.is-open .kf-body > * { animation: kfRowIn .38s cubic-bezier(.34, 1.56, .64, 1) backwards; }
.kf-widget:hover .kf-body > :nth-child(2),
.kf-widget.is-open .kf-body > :nth-child(2) { animation-delay: .08s; }

.kf-body { display: flex; gap: 14px; align-items: stretch; }
.kf-contacts {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}
.kf-note {
    margin: 2px 0 0;
    font-size: 11px;
    line-height: 1.5;
    color: var(--t3);
}

/* —— 面板内容 —— */
.kf-title {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--t1);
    margin-bottom: 12px;
}
.kf-dot {
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--green);
    animation: kfDotPulse 2s ease-in-out infinite; /* 在线绿点呼吸 */
}
.kf-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--r);
    background: var(--bg-2);
    flex-wrap: wrap; /* 极端窄面板时「在线咨询」换行，绝不截断 QQ 号 */
}
.kf-ico {
    display: flex;
    align-items: center;
    width: 16px;
    height: 16px;
    flex: none;
    color: var(--accent);
}
.kf-ico svg { width: 100%; height: 100%; }
.kf-label { font-size: 12px; color: var(--t3); flex: none; }
.kf-val {
    font-size: 13px;
    font-weight: 600;
    color: var(--t1);
    font-variant-numeric: tabular-nums;
    flex: 1;
    min-width: 0;
    white-space: nowrap; /* 号码绝不换行截断 */
}
.kf-link { font-size: 12px; color: var(--accent); text-decoration: none; flex: none; }
.kf-link:hover { text-decoration: underline; }
.kf-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.kf-qr img,
.kf-qr-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 118px;
    height: 118px;
    margin: 0 auto 8px;
    border-radius: var(--r);
}
.kf-qr img { border: 1px solid var(--line-soft); object-fit: cover; }
.kf-qr-empty {
    border: 1.5px dashed var(--line);
    font-size: 12px;
    color: var(--t3);
}
.kf-qr-tip { font-size: 12px; color: var(--t3); }

@keyframes kfFloat {
    0%, 100% { transform: translateY(0) rotate(0); }
    30%      { transform: translateY(-6px) rotate(1.6deg); }
    70%      { transform: translateY(-3px) rotate(-1.6deg); }
}
@keyframes kfAnt {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-1.8px); }
}
/* hover 时天线兴奋地连蹦 */
@keyframes kfAntHop {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3.2px); }
}
.kf-fab:hover .kf-ant { animation: kfAntHop .5s ease-in-out infinite; }
.kf-fab:hover .kf-bot { animation-duration: 1.8s; } /* 飘得更快 = 更来劲 */
@keyframes kfRing {
    0%       { transform: scale(.88); opacity: .65; }
    70%, 100% { transform: scale(1.30); opacity: 0; }
}
@keyframes kfBlinkOpen {
    0%, 90%   { opacity: 1; }
    92%, 96%  { opacity: 0; }
    98%, 100% { opacity: 1; }
}
@keyframes kfBlinkClosed {
    0%, 90%   { opacity: 0; }
    92%, 96%  { opacity: 1; }
    98%, 100% { opacity: 0; }
}
@keyframes kfTwinkle {
    0%, 100% { opacity: 0; transform: scale(.4) rotate(0); }
    50%      { opacity: .95; transform: scale(1) rotate(24deg); }
}
@keyframes kfDotPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(52, 199, 89, .40); }
    70%      { box-shadow: 0 0 0 5px rgba(52, 199, 89, 0); }
}
@keyframes kfRowIn {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .kf-fab, .kf-fab::before, .kf-bot, .kf-ant,
    .kf-spark, .kf-tag, .kf-dot { animation: none; }
    .kf-widget:hover .kf-body > *,
    .kf-widget.is-open .kf-body > * { animation: none; }
}

.header-user .btn-sm { height: 34px; padding: 0 18px; font-size: 14px; }
/* 已登录：头像 + 昵称 */
.user-chip {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 14px 4px 4px;
    border-radius: var(--r-p);
    background: var(--bg-2);
    max-width: 190px;
}
.user-chip .avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    flex: none;
}
.user-chip em {
    font-style: normal;
    font-size: 14px;
    font-weight: 500;
    color: var(--t1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== 按钮（统一胶囊） ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: var(--r-p);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.btn-sm { height: 30px; padding: 0 15px; font-size: 13px; }
.btn-lg { height: 48px; padding: 0 30px; font-size: 17px; }
.btn-block { width: 100%; }

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-h); }
.btn-line { background: #fff; border-color: var(--line); color: var(--t1); }
.btn-line:hover { border-color: var(--t3); }
.btn-ghost { background: transparent; color: var(--accent); }
.btn-ghost:hover { background: var(--accent-soft); }
.btn-glass {
    background: rgba(255, 255, 255, .16);
    color: #fff;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.btn-glass:hover { background: rgba(255, 255, 255, .26); }
.btn:disabled, .btn.is-disabled { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover, .btn.is-disabled:hover { background: var(--accent); }

/* ===== 表单 ===== */
.form-item { margin-bottom: 14px; }
.form-item label {
    display: block;
    font-size: 13px;
    color: var(--t2);
    margin-bottom: 6px;
}
.input {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    font-size: 16px;
    font-family: inherit;
    color: var(--t1);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.input::placeholder { color: var(--t3); }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }

.captcha-row { display: flex; gap: 10px; }
.captcha-row .input { flex: 1; }
.captcha-img {
    width: 120px;
    height: 46px;
    flex: none;
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    background: var(--bg-2);
    cursor: pointer;
    object-fit: cover;
}
.form-tip { font-size: 13px; color: var(--t2); text-align: center; margin-top: 18px; }
.form-tip a { color: var(--accent); }

/* ===== 提示条 ===== */
.alert {
    display: none;
    border-radius: var(--r);
    font-size: 13px;
    padding: 10px 14px;
    margin-bottom: 16px;
}
.alert-error { background: #fdeceb; color: #a32d2d; }
.alert-success { background: #e8f7ee; color: #1d7a3d; }

/* ===== 区块头（首页 / 选服页共用） ===== */
.blk { padding: 56px 0; }
.blk-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}
.blk-head .h2 { margin-top: 4px; }

/* ===== 页脚 ===== */
.site-footer {
    background: var(--bg-2);
    border-top: 1px solid var(--line-soft);
    padding: 36px 0;
    margin-top: 40px;
}
.foot-in {
    display: flex;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--t2);
    line-height: 1.9;
}
.foot-col { min-width: 200px; }
.foot-col h4 { font-size: 13px; font-weight: 600; color: var(--t1); margin-bottom: 8px; }
.foot-col a:hover { color: var(--accent); }
.health-tip { font-size: 12px; color: var(--t3); }

/* ===== 空态 ===== */
.empty {
    padding: 26px 0;
    text-align: center;
    font-size: 13px;
    color: var(--t3);
}

/* ===== 窄屏 ===== */
@media (max-width: 900px) {
    .h-display { font-size: 34px; }
    .lead { font-size: 16px; }
    .main-nav { display: none; }
}