/* 姓名PK · zhaoUI 新版皮肤
 * 仅在 ?ui=new（默认）时加载；旧版不加载本文件，保持原来的界面。
 * 外壳（登录页、玩家栏、标签页、动态消息）是用 zhaoUI 令牌重写的；各游戏面板（装备/天赋/战斗/探险/任务/商店/排行榜/粒子战场）
 * 仍是原来的 Vue 组件，这里只统一它们共用的卡片、按钮、输入框、徽章、字体，不改它们的玩法与配色逻辑。 */

/* ── 页面基调：中性底色、系统字体（不再加载 Google 字体）── */
body[data-cc-zhaoui] {
    background: var(--zh-bg-subtle, #f6f8fb);
    color: var(--zh-text, #131720);
    font-family: var(--zh-font-sans, system-ui, sans-serif);
}
body[data-cc-zhaoui] .font-game,
body[data-cc-zhaoui] .font-chinese { font-family: inherit; }
body[data-cc-zhaoui] .cloud { display: none; }              /* 云朵装饰：三组无限位移动画，白白重绘 */
body[data-cc-zhaoui] ::-webkit-scrollbar-track { background: transparent; }
body[data-cc-zhaoui] ::-webkit-scrollbar-thumb { background: var(--zh-border-strong, #c9ced6); border: 2px solid transparent; background-clip: padding-box; }
body[data-cc-zhaoui] ::-webkit-scrollbar-thumb:hover { background: var(--zh-text-tertiary, #626872); background-clip: padding-box; }

/* ── 各面板共用元素：去掉悬停缩放/毛玻璃/弹跳过渡 ── */
body[data-cc-zhaoui] .cartoon-card {
    background: var(--zh-bg-elevated, #fff);
    border: 1px solid var(--zh-border, #e4e6ea);
    border-radius: var(--zh-radius-lg, 10px);
    box-shadow: var(--zh-shadow-sm, 0 1px 2px rgba(0, 0, 0, .05));
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
body[data-cc-zhaoui] .cartoon-card:hover { transform: none; box-shadow: var(--zh-shadow-md, 0 4px 12px rgba(0, 0, 0, .08)); }   /* 原来整块 scale(1.02)，大面板一悬停整体抖动 */
body[data-cc-zhaoui] .cute-btn { border-radius: var(--zh-radius-md, 6px); box-shadow: none; transition: background-color var(--zh-dur-fast, .12s), border-color var(--zh-dur-fast, .12s), color var(--zh-dur-fast, .12s), opacity var(--zh-dur-fast, .12s); }
body[data-cc-zhaoui] .cute-btn:hover { transform: none; box-shadow: none; }
body[data-cc-zhaoui] .cute-btn:active { transform: none; }
body[data-cc-zhaoui] .cute-input { border: 1px solid var(--zh-border-strong, #c9ced6); border-radius: var(--zh-radius-md, 6px); background: var(--zh-bg-elevated, #fff); }
body[data-cc-zhaoui] .cute-input:focus { transform: none; border-color: var(--zh-color-primary); box-shadow: 0 0 0 3px var(--zh-color-primary-subtle); outline: none; }
body[data-cc-zhaoui] .badge { border-radius: var(--zh-radius-sm, 4px); font-weight: 600; }
body[data-cc-zhaoui] .progress-fill::after { display: none; }   /* 进度条上无限循环的闪光 */
body[data-cc-zhaoui] button:focus-visible, body[data-cc-zhaoui] [role="tab"]:focus-visible { outline: 2px solid var(--zh-color-primary); outline-offset: 2px; }

/* ── 登录页 ── */
.pkz-login { min-height: calc(100vh - 56px); min-height: calc(100dvh - 56px); display: flex; align-items: center; justify-content: center; padding: var(--zh-space-6, 24px) var(--zh-space-4, 16px); }
.pkz-login-card { width: 100%; max-width: 26rem; padding: var(--zh-space-8, 32px) var(--zh-space-6, 24px); background: var(--zh-bg-elevated, #fff); border: 1px solid var(--zh-border); border-radius: var(--zh-radius-lg); box-shadow: var(--zh-shadow-md, 0 4px 12px rgba(0, 0, 0, .08)); text-align: center; }
.pkz-logo { width: 4.5rem; height: 4.5rem; margin: 0 auto var(--zh-space-4, 16px); display: grid; place-items: center; font-size: 2.25rem; border-radius: 50%; background: var(--zh-color-primary-subtle); }
.pkz-login-card h1 { margin: 0; font-size: 1.75rem; line-height: 1.2; font-weight: 700; color: var(--zh-text); }
.pkz-sub { margin: 4px 0 var(--zh-space-6, 24px); color: var(--zh-text-secondary); }
.pkz-login-form { text-align: left; display: grid; gap: var(--zh-space-4, 16px); }
.pkz-block { width: 100%; justify-content: center; }
.pkz-features { list-style: none; margin: var(--zh-space-6, 24px) 0 0; padding: var(--zh-space-4, 16px) 0 0; border-top: 1px solid var(--zh-border); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--zh-space-2, 8px); font-size: .8125rem; color: var(--zh-text-secondary); }
.pkz-features li { display: grid; gap: 4px; justify-items: center; }
.pkz-features li > span { font-size: 1.25rem; }
.pkz-ver { margin: var(--zh-space-4, 16px) 0 0; font-size: .75rem; color: var(--zh-text-tertiary); }
@media (max-width: 380px) { .pkz-features { grid-template-columns: repeat(2, 1fr); } }

/* ── 游戏主界面外壳 ── */
.pkz-app { max-width: 76rem; margin: 0 auto; padding: var(--zh-space-4, 16px) var(--zh-space-4, 16px) 5rem; }
.pkz-app > main.container { max-width: none; padding-left: 0; padding-right: 0; }   /* 原来 Tailwind container 会按断点跳变宽度 */

/* 玩家栏：不再 sticky 悬浮盖住内容；三块在窄屏自动换行 */
.pkz-head { background: var(--zh-bg-elevated, #fff); border: 1px solid var(--zh-border); border-radius: var(--zh-radius-lg); padding: var(--zh-space-4, 16px) var(--zh-space-5, 20px); box-shadow: var(--zh-shadow-sm, 0 1px 2px rgba(0, 0, 0, .05)); }
.pkz-head-row { display: flex; align-items: center; justify-content: space-between; gap: var(--zh-space-4, 16px); flex-wrap: wrap; }
.pkz-player { display: flex; align-items: center; gap: var(--zh-space-3, 12px); min-width: 0; }
.pkz-avatar { position: relative; flex: none; }
.pkz-avatar-img { width: 3.5rem; height: 3.5rem; border-radius: var(--zh-radius-lg); overflow: hidden; background: var(--zh-bg-subtle); border: 1px solid var(--zh-border); }
.pkz-lv { position: absolute; right: -6px; bottom: -6px; padding: 1px 7px; font-size: .6875rem; font-weight: 700; line-height: 1.5; color: var(--zh-on-primary, #fff); background: var(--zh-color-primary); border: 2px solid var(--zh-bg-elevated, #fff); border-radius: 999px; }
.pkz-player-info { min-width: 0; }
.pkz-player-info h2 { margin: 0; font-size: 1.125rem; line-height: 1.3; font-weight: 700; overflow-wrap: anywhere; }
.pkz-player-info h2 small { margin-left: 4px; font-size: .8125rem; font-weight: 600; color: var(--zh-text-warning, #a15c00); }
.pkz-tags { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.pkz-tag { display: inline-flex; align-items: center; height: 1.6em; padding: 0 .6em; font-size: .8125rem; border-radius: var(--zh-radius-sm, 4px); background: var(--zh-bg-subtle); color: var(--zh-text-secondary); }
.pkz-wallet { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--zh-space-2, 8px); flex-wrap: wrap; }
.pkz-wallet li, .pkz-online { display: inline-flex; align-items: center; gap: 6px; height: 2.25rem; padding: 0 .85rem; border-radius: var(--zh-radius-md, 6px); background: var(--zh-bg-subtle); border: 1px solid var(--zh-border); font-size: .9375rem; }
.pkz-wallet b, .pkz-online b { font-weight: 700; font-variant-numeric: tabular-nums; }
.pkz-actions { display: flex; align-items: center; gap: var(--zh-space-2, 8px); }
.pkz-exp { margin-top: var(--zh-space-4, 16px); }
.pkz-exp-text { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: .75rem; color: var(--zh-text-secondary); }
.pkz-exp-text span:last-child { font-variant-numeric: tabular-nums; color: var(--zh-color-primary-text); font-weight: 600; }
.pkz-exp-track { height: 8px; border-radius: 999px; background: var(--zh-bg-subtle); border: 1px solid var(--zh-border); overflow: hidden; }
.pkz-exp-fill { height: 100%; min-width: 2px; border-radius: 999px; background: var(--zh-color-primary); transition: width .4s var(--zh-ease-standard, ease); }

/* 标签页：下划线式，窄屏横向滚动，当前项高亮 */
.pkz-tabs { display: flex; gap: 2px; margin: var(--zh-space-4, 16px) 0 var(--zh-space-5, 20px); border-bottom: 1px solid var(--zh-border); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.pkz-tabs::-webkit-scrollbar { display: none; }
.pkz-tabs button { flex: none; display: inline-flex; align-items: center; gap: 6px; height: var(--zh-control-h, 40px); padding: 0 var(--zh-space-4, 16px); border: 0; background: none; font: inherit; font-weight: 500; color: var(--zh-text-secondary); cursor: pointer; position: relative; white-space: nowrap; transition: color var(--zh-dur-fast, .12s); }
.pkz-tabs button:hover { color: var(--zh-color-primary-text); }
.pkz-tabs button.is-active { color: var(--zh-color-primary-text); font-weight: 700; }
.pkz-tabs button.is-active::after { content: ""; position: absolute; left: var(--zh-space-3, 12px); right: var(--zh-space-3, 12px); bottom: -1px; height: 2px; border-radius: 2px; background: var(--zh-color-primary); }

/* 动态消息：默认收起成小按钮；展开后在右下角浮出（≥1024px 才显示，和原来一致）；不再默认盖住第三列内容 */
.pkz-feed { position: fixed; right: var(--zh-space-4, 16px); bottom: var(--zh-space-4, 16px); z-index: 40; display: none; width: 20rem; max-width: calc(100vw - 32px); }
@media (min-width: 1024px) { .pkz-feed { display: block; } }
.pkz-feed-toggle { width: 100%; display: flex; align-items: center; gap: 8px; height: 2.5rem; padding: 0 var(--zh-space-3, 12px); border: 1px solid var(--zh-border); border-radius: var(--zh-radius-lg); background: var(--zh-bg-elevated, #fff); color: var(--zh-text); font: inherit; font-weight: 600; cursor: pointer; box-shadow: var(--zh-shadow-md, 0 4px 12px rgba(0, 0, 0, .08)); }
.pkz-feed:not(.is-open) .pkz-feed-toggle { width: auto; margin-left: auto; }
.pkz-feed-toggle small { min-width: 1.4em; padding: 0 .4em; text-align: center; font-size: .75rem; line-height: 1.5em; border-radius: 999px; color: var(--zh-on-primary, #fff); background: var(--zh-color-primary); }
.pkz-feed-caret { margin-left: auto; font-size: .75rem; color: var(--zh-text-tertiary); }
.pkz-feed.is-open .pkz-feed-toggle { border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: none; }
.pkz-feed-body { max-height: min(22rem, 50vh); overflow-y: auto; background: var(--zh-bg-elevated, #fff); border: 1px solid var(--zh-border); border-top: 0; border-radius: 0 0 var(--zh-radius-lg) var(--zh-radius-lg); box-shadow: var(--zh-shadow-md, 0 4px 12px rgba(0, 0, 0, .08)); }
.pkz-feed-list { list-style: none; margin: 0; padding: var(--zh-space-2, 8px); display: grid; gap: 4px; }
.pkz-feed-list li { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: baseline; padding: 6px 8px; border-radius: var(--zh-radius-md, 6px); font-size: .8125rem; }
.pkz-feed-list li:hover { background: var(--zh-bg-subtle); }
.pkz-feed-list time { font-size: .6875rem; color: var(--zh-text-tertiary); white-space: nowrap; }
.pkz-chat { border-top: 1px solid var(--zh-border); }
.pkz-chat li { grid-template-columns: 1fr auto; }
.pkz-feed-text small { color: var(--zh-text-tertiary); }
.pkz-empty { margin: 0; padding: var(--zh-space-5, 20px); text-align: center; font-size: .8125rem; color: var(--zh-text-tertiary); }

/* 窄屏：玩家栏三块纵向排，货币横向滚动 */
@media (max-width: 640px) {
    .pkz-app { padding: var(--zh-space-3, 12px) var(--zh-space-3, 12px) 4rem; }
    .pkz-head { padding: var(--zh-space-3, 12px) var(--zh-space-4, 16px); }
    .pkz-head-row { gap: var(--zh-space-3, 12px); }
    .pkz-wallet { order: 3; width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .pkz-wallet li { flex: none; }
    .pkz-actions { margin-left: auto; }
}

/* 面板内容区：外壳是 zhaoUI 的小圆角，里面的卡片原来是 Tailwind 的 rounded-3xl 大圆角，统一成同一套圆角；收紧标签栏下面的空隙 */
.pkz-app > main { padding-top: 0 !important; padding-bottom: var(--zh-space-6, 24px) !important; }
.pkz-app main .rounded-3xl, .pkz-app main .rounded-\[2rem\] { border-radius: var(--zh-radius-lg, 10px); }
.pkz-app main .rounded-2xl, .pkz-app main .rounded-xl { border-radius: var(--zh-radius-md, 6px); }
.pkz-app main .shadow-lg, .pkz-app main .shadow-xl, .pkz-app main .shadow-2xl { box-shadow: var(--zh-shadow-sm, 0 1px 2px rgba(0, 0, 0, .06)); }
.pkz-app main .backdrop-blur, .pkz-app main .glass-effect { backdrop-filter: none; -webkit-backdrop-filter: none; }

/* 尊重系统的"减少动态效果" */
@media (prefers-reduced-motion: reduce) {
    body[data-cc-zhaoui] *, body[data-cc-zhaoui] *::before, body[data-cc-zhaoui] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}