/* ===== 全站缩放（仅桌面端生效，手机/平板保持原样） ===== */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
    html {
        zoom: 1.2;
    }
}

/* 60/assets/css/theme.css —— 全站设计令牌 + 通用组件 */

:root {
    /* ===== 主色：暗金 ===== */
    --gold-primary:  #d4af37;
    --gold-dark:     #b8860b;
    --gold-light:    #e8c96a;
    --gold-soft:     rgba(212, 175, 55, 0.12);

    /* ===== 背景 ===== */
    --bg-body:   #1a1a1a;
    --bg-card:   #232323;
    --bg-input:  #1a1a1a;
    --bg-hover:  #2a2a2a;

    /* ===== 边框 ===== */
    --border:        #3a3a3a;
    --border-hover:  var(--gold-primary);

    /* ===== 文字 ===== */
    --text-primary:   #e8e0c8;
    --text-secondary: #b8b8b8;
    --text-muted:     #8a8a8a;

    /* ===== 状态色 ===== */
    --success: #81c784;
    --danger:  #e57373;
    --warning: #ffb74d;
    --info:    #64b5f6;

    /* ===== 圆角 ===== */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    /* ===== 阴影 ===== */
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
    --shadow-md: 0 5px 20px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 40px rgba(0,0,0,0.5);

    /* ===== 字体 ===== */
    --font-base: 'Segoe UI', 'Microsoft YaHei', system-ui, sans-serif;
}

/* ===== 全局 reset ===== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}
/* ===== 全站禁止文字选中 ===== */
html, body {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/* 输入框、文本域、可编辑区域，允许选中 */
input, textarea, select,
[contenteditable="true"],
.is-selectable {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}
/* ===== 全站禁止图片被鼠标拖拽 ===== */
img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    pointer-events: auto;
}
body {
    font-family: var(--font-base);
    background: var(--bg-body);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
}
a { color: var(--gold-primary); text-decoration: none; }
a:hover { color: var(--gold-light); }

/* ===== 卡片 ===== */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-md);
}

/* ===== 按钮 ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--gold-dark), var(--gold-primary));
    color: #1a1a1a;
    border: none;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
}
.btn:hover { opacity: 0.9; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-ghost {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border);
}
.btn-ghost:hover { border-color: var(--gold-primary); color: var(--gold-primary); }

.btn-danger {
    background: transparent;
    color: var(--danger);
    border: 1px solid var(--danger);
}
.btn-danger:hover { background: var(--danger); color: white; }

.btn-sm { padding: 6px 12px; font-size: 13px; }

/* ===== 表单 ===== */
.field { margin-bottom: 16px; }
.field label {
    display: block;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
    font-family: inherit;
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--gold-primary); }

/* ===== 提示消息 ===== */
.msg { font-size: 13px; text-align: center; min-height: 18px; margin-top: 12px; }
.msg.err { color: var(--danger); }
.msg.ok  { color: var(--success); }

/* ===== 认证盒子（登录/注册） ===== */
.auth-box {
    width: 100%;
    max-width: 420px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px 32px;
    box-shadow: var(--shadow-lg);
}
.auth-box h1 {
    font-size: 22px;
    font-weight: 500;
    color: var(--gold-primary);
    text-align: center;
    margin-bottom: 8px;
    letter-spacing: 1px;
}
.auth-box .sub {
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 28px;
}
.auth-box .links {
    text-align: center;
    margin-top: 20px;
    font-size: 13px;
    color: var(--text-muted);
}
.auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* ===== 顶部导航（统一版：支持下拉 + 移动端折叠） ===== */
.topbar {
    background: rgba(35, 35, 35, 0.95);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
    padding: 0 24px;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 100;
    transition: background 0.3s ease, border-color 0.3s ease;
}
.topbar.home-transparent {
    background: transparent;
    border-bottom-color: transparent;
}
.topbar.home-transparent.scrolled {
    background: rgba(20, 20, 20, 0.88);
    backdrop-filter: blur(10px);
    border-bottom-color: var(--border);
}
.topbar .logo {
    font-size: 18px;
    font-weight: 600;
    color: var(--gold-primary);
    letter-spacing: 1px;
    white-space: nowrap;
}
.topbar .logo:hover {
    color: var(--gold-light);
    text-shadow: 0 0 12px rgba(212, 175, 55, 0.35);
}
.topbar .menu-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-primary);
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    font-size: 20px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: inherit;
    transition: all 0.15s;
}
.topbar .menu-toggle:hover {
    border-color: var(--gold-primary);
    color: var(--gold-primary);
}

.topbar .nav {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
}
.topbar .nav > a,
.topbar .nav > .nav-drop > .nav-drop-btn {
    color: var(--text-secondary);
    font-size: 14px;
    padding: 8px 14px;
    border-radius: var(--radius-md);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.15s;
    background: transparent;
    border: none;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.topbar .nav > a:hover,
.topbar .nav > .nav-drop > .nav-drop-btn:hover,
.topbar .nav > a.active,
.topbar .nav > .nav-drop.active > .nav-drop-btn {
    color: var(--gold-primary);
    background: rgba(212, 175, 55, 0.08);
}
.topbar .nav > .nav-drop {
    position: relative;
}
.topbar .nav > .nav-drop > .nav-drop-btn::after {
    content: '▾';
    font-size: 10px;
    opacity: 0.6;
    transition: transform 0.2s;
}
.topbar .nav > .nav-drop.open > .nav-drop-btn::after {
    transform: rotate(180deg);
}
.topbar .nav .nav-drop-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 8px;
    min-width: 170px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    display: none;
    z-index: 300;
    margin-top: 6px;
}
.topbar .nav > .nav-drop.open .nav-drop-menu {
    display: block;
}
.topbar .nav .nav-drop-menu a {
    display: block;
    padding: 9px 14px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 13.5px;
    white-space: nowrap;
    transition: all 0.15s;
}
.topbar .nav .nav-drop-menu a:hover,
.topbar .nav .nav-drop-menu a.active {
    color: var(--gold-primary);
    background: rgba(212, 175, 55, 0.08);
}

/* ===== 移动端：折叠为汉堡菜单 ===== */
@media (max-width: 768px) {
    .topbar {
        padding: 10px 14px;
        gap: 8px;
    }
    .topbar .menu-toggle {
        display: inline-flex;
    }
    .topbar .nav {
        display: none;
        flex-direction: column;
        align-items: stretch;
        flex-basis: 100%;
        width: 100%;
        gap: 2px;
        margin-top: 8px;
        padding-top: 10px;
        border-top: 1px solid var(--border);
    }
    .topbar .nav.open {
        display: flex;
    }
    .topbar .nav > a,
    .topbar .nav > .nav-drop > .nav-drop-btn {
        padding: 12px 14px;
        font-size: 14px;
        border-radius: var(--radius-sm);
        width: 100%;
        justify-content: flex-start;
    }
    .topbar .nav > .nav-drop {
        position: static;
        width: 100%;
    }
    .topbar .nav > .nav-drop > .nav-drop-btn {
        justify-content: space-between;
    }
    .topbar .nav > .nav-drop > .nav-drop-btn::after {
        margin-left: auto;
    }
    .topbar .nav .nav-drop-menu {
        position: static;
        transform: none;
        box-shadow: none;
        border: none;
        background: transparent;
        padding: 0;
        margin: 0;
        display: none;
        min-width: 0;
    }
    .topbar .nav > .nav-drop.open .nav-drop-menu {
        display: block;
    }
    .topbar .nav .nav-drop-menu a {
        padding: 10px 14px 10px 28px;
        font-size: 13.5px;
    }
}

/* ===== 容器 ===== */
.container { max-width: 1100px; margin: 0 auto; padding: 24px; }
.page-title {
    font-size: 20px;
    color: var(--gold-primary);
    margin-bottom: 20px;
    letter-spacing: 1px;
}

/* ===== 徽章 ===== */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    border: 1px solid var(--border);
    color: var(--text-secondary);
}
.badge-gold { border-color: var(--gold-primary); color: var(--gold-primary); }

/* ===== 弹窗 ===== */
.modal-mask {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    z-index: 1000;
    align-items: flex-start;
    justify-content: center;
    padding: 30px 20px;
    overflow-y: auto;
}
.modal-mask.show { display: flex; }
.modal {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px;
    width: 100%;
    max-width: 460px;
    box-shadow: var(--shadow-lg);
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    margin: auto;
    /* 隐藏滚动条但保留滚动能力 */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.modal::-webkit-scrollbar { display: none; }
.modal h2 {
    font-size: 18px;
    color: var(--gold-primary);
    margin-bottom: 18px;
}
.modal .actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}
/* ===== 魔兽职业颜色（官方标准） ===== */
:root {
    --c-warrior:       #C79C6E;
    --c-paladin:       #d4af37;
    --c-hunter:        #ABD473;
    --c-rogue:         #FFF569;
    --c-priest:        #FFFFFF;
    --c-death-knight:  #C41F3B;
    --c-shaman:        #0070DE;
    --c-mage:          #40C7EB;
    --c-warlock:       #8787ED;
    --c-druid:         #FF7D0A;
}

.class-warrior      { color: var(--c-warrior) !important; }
.class-paladin      { color: var(--c-paladin) !important; }
.class-hunter       { color: var(--c-hunter) !important; }
.class-rogue        { color: var(--c-rogue) !important; }
.class-priest       { color: var(--c-priest) !important; }
.class-death-knight { color: var(--c-death-knight) !important; }
.class-shaman       { color: var(--c-shaman) !important; }
.class-mage         { color: var(--c-mage) !important; }
.class-warlock      { color: var(--c-warlock) !important; }
.class-druid        { color: var(--c-druid) !important; }

/* ===== 弹窗内部通用组件（供 Dialog 组件使用） ===== */
.modal .modal-message {
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.85;
    white-space: pre-wrap;
    word-break: break-word;
}
.modal .modal-input {
    width: 100%;
    margin-top: 14px;
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    min-height: 44px;
    resize: vertical;
    line-height: 1.6;
    transition: border-color 0.2s;
}
.modal .modal-input:focus { border-color: var(--gold-primary); }
.modal .modal-count {
    font-size: 12px;
    color: var(--text-muted);
    text-align: right;
    margin-top: 4px;
}
.modal .btn-ok {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    background: linear-gradient(135deg, var(--gold-dark), var(--gold-primary));
    color: #1a1a1a;
    border: none;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    min-width: 84px;
    letter-spacing: 0.5px;
    transition: all 0.15s;
}
.modal .btn-ok:hover { opacity: 0.92; transform: translateY(-1px); }
.modal .btn-ok:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.modal .btn-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    min-width: 84px;
    letter-spacing: 0.5px;
    transition: all 0.15s;
}
.modal .btn-cancel:hover {
    border-color: var(--gold-primary);
    color: var(--gold-primary);
}
.modal .btn-danger-solid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    background: transparent;
    color: var(--danger);
    border: 1px solid var(--danger);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    min-width: 84px;
    letter-spacing: 0.5px;
    transition: all 0.15s;
}
.modal .btn-danger-solid:hover {
    background: var(--danger);
    color: #fff;
}

/* ===== 通用气泡提示 ===== */
.tt-tooltip {
    position: fixed;
    z-index: 5000;
    max-width: 260px;
    padding: 8px 12px;
    background: var(--bg-card);
    border: 1px solid var(--gold-primary);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.6;
    word-break: break-word;
    white-space: pre-wrap;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease;
}
.tt-tooltip.show {
    opacity: 1;
    visibility: visible;
}
/* ===== 全站隐藏滚动条（内容仍可滚动） ===== */
html {
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* IE / Edge */
}
html::-webkit-scrollbar {
    display: none;              /* Chrome / Safari */
}

/* 部分弹窗原本就隐藏滚动条，这里再兜底一次 */
body::-webkit-scrollbar {
    display: none;
}

/* ===== 跨服切换按钮 ===== */
.site-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    margin-left: 6px;
    border-radius: var(--radius-md);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-family: inherit;
}

.site-switch:hover {
    color: var(--gold-primary);
    border-color: var(--gold-primary);
    background: rgba(212, 175, 55, 0.08);
}

.site-switch-icon {
    display: inline-block;
    width: 1.1em;
    text-align: center;
    font-size: 14px;
    line-height: 1;
    color: var(--gold-primary);
    transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.5);
}
.site-switch:hover .site-switch-icon {
    transform: rotate(180deg);
}

.site-switch-text {
    transition: color 0.2s;
}

/* 移动端：占满整行 */
@media (max-width: 768px) {
    .site-switch {
        margin: 6px 0 0;
        width: 100%;
        justify-content: center;
        padding: 10px 14px;
        font-size: 14px;
    }
}

/* ===== 跨服穿梭过渡 ===== */
.site-transition {
    position: fixed;
    inset: 0;
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(
        circle at var(--cx, 50%) var(--cy, 50%),
        rgba(232, 201, 106, 0.9) 0%,
        rgba(212, 175, 55, 0.55) 25%,
        rgba(26, 22, 14, 0.95) 60%,
        rgba(12, 12, 12, 1) 100%
    );
    transition: opacity 0.5s ease;
}
.site-transition.active {
    opacity: 1;
}

.site-transition-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.3);
    font-size: 64px;
    color: #d4af37;
    text-shadow: 0 0 40px rgba(212, 175, 55, 0.8);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.2, 0.9, 0.4, 1.05);
}
.site-transition.active .site-transition-icon {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}
/* ===== 页面过渡：光尘 ===== */
.fx-dust {
    position: fixed;
    inset: 0;
    z-index: 99999;
    pointer-events: none;
    overflow: hidden;
}

.fx-dust .ground {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 100%,
        rgba(212, 175, 55, 0.15) 0%,
        rgba(212, 175, 55, 0.055) 45%,
        transparent 75%);
    opacity: 0;
    will-change: opacity;
}
.fx-dust.play .ground {
    animation: dustGroundHold 1s cubic-bezier(0.4, 0, 0.4, 1) forwards;
}
@keyframes dustGroundHold {
    0%   { opacity: 0; }
    26%  { opacity: 1; }
    74%  { opacity: 1; }
    100% { opacity: 0; }
}

.fx-dust .beam {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 60px;
    height: 100%;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center bottom;
    background: linear-gradient(0deg,
        rgba(232, 201, 106, 0.5) 0%,
        rgba(212, 175, 55, 0.2) 40%,
        transparent 90%);
    filter: blur(80px);
    opacity: 0;
}
.fx-dust.play .beam {
    animation: dustBeamRise 1.1s cubic-bezier(0.3, 0.4, 0.3, 1) forwards;
}
@keyframes dustBeamRise {
    0%   { opacity: 0; transform: translateX(-50%) scaleX(0); }
    35%  { opacity: 1; transform: translateX(-50%) scaleX(1); }
    65%  { opacity: 1; transform: translateX(-50%) scaleX(1.4); }
    100% { opacity: 0; transform: translateX(-50%) scaleX(2); }
}

.fx-dust .spark {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, #e8c96a 50%, transparent 100%);
    opacity: 0;
}

@keyframes dustSparkRise {
    0%   { opacity: 0; transform: translate(0, 0) scale(0.6); }
    15%  { opacity: 1; transform: translate(calc(var(--drift-x) * 0.2), -10vh) scale(1); }
    60%  { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--drift-x), -90vh) scale(0.4); }
}