@charset "UTF-8";
/* 词卷 V7.0.0 单词 PK 公共件的基础样式（契约 release-packages/v7-pk/V7-CONTRACT.md §8 / V7-CONTRACT-R2.md §B）
   ─────────────────────────────────────────────────────────────────────────────
   · 段位徽章 .ws-pk-badge（app/04-main.js wsPkBadge 生成）：十个段位十个颜色，三个尺寸，定级中单独一种样子。新版旧版都生效；
     颜色只写在 --pk-c 上，描边 / 底色跟主题令牌走（--card --ink --line）。新版各主题的「质感」（像素盾、星穹切角 HUD…）在 16–25 里覆盖，不改结构。
     文字（段位名 / 罗马数字）一律是 --ink 写在「段位色 15% + 卡片底」上，九个主题实测都 ≥ 4.5:1；段位色本身只做图形填充，不当字。
   · 名片 #wsPkCard.ws-pk-card、单词 PK 天梯 #wsPkLadder、学习排行榜名字后的徽章与可点名字：DOM 新旧版共用，这里给「旧版也好看」的底子。
   · 旧版首页段位条 .ws-pk-strip、旧版账户页单词 PK 卡 .ws-pk-acct：只属于旧版（新版入口卡在 17 / 21、「我的」页卡在 19 / 25），
     新版下由本文件最后一段收起。
   · 不做任何持续动画（首页空闲性能门）；只有名片弹出时一次淡入，且尊重 prefers-reduced-motion。 */

/* ============ 1. 段位徽章 ============ */
.ws-pk-badge{
  --pk-c:#9AA6B2;
  display:inline-flex;align-items:center;gap:4px;flex:none;vertical-align:middle;
  height:22px;padding:0 8px 0 5px;margin:0 0 0 6px;border-radius:999px;
  background:color-mix(in srgb,var(--pk-c) 10%,var(--card,#fff));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pk-c) 55%,transparent);
  color:var(--ink,#1d1d1f);font-family:var(--cjk,system-ui,sans-serif);font-size:12px;line-height:1;font-weight:800;
  letter-spacing:0;white-space:nowrap;font-variant-numeric:tabular-nums;text-transform:none;
}
.ws-pk-badge__shape{
  flex:none;width:12px;height:14px;
  background:var(--pk-shape,linear-gradient(150deg,color-mix(in srgb,var(--pk-c) 62%,#fff) 0 34%,var(--pk-c) 34% 70%,color-mix(in srgb,var(--pk-c) 78%,#000) 70%));
  clip-path:polygon(50% 0,100% 17%,100% 60%,50% 100%,0 60%,0 17%);
}
/* ui-polish-apple.css 的 :where([class*="badge"]) 会给每个子元素加 4px 8px 内边距（类名子串误伤）→ 这里用两个类的权重清掉 */
.ws-pk-badge[class]{padding:0 8px 0 5px;}
.ws-pk-badge[class]>*{padding:0;margin:0;border:0;min-height:0;min-width:0;}
/* 第三轮：文字用 line-height:normal —— 外框 line-height:1 时中文（雅黑 / 苹方）的字形在 22px 药丸里整体偏上 2–3px */
.ws-pk-badge__name{font-style:normal;font-weight:800;line-height:normal;}
.ws-pk-badge__div{font-weight:900;letter-spacing:.02em;line-height:normal;}
.ws-pk-badge[class] .ws-pk-badge__name+.ws-pk-badge__div{margin-left:-1px;}
.ws-pk-badge[data-size="md"]{height:28px;gap:5px;padding:0 11px 0 7px;font-size:13px;}
.ws-pk-badge[data-size="md"] .ws-pk-badge__shape{width:15px;height:18px;}
.ws-pk-badge[data-size="lg"]{height:52px;gap:8px;padding:0 16px 0 11px;margin:0;border-radius:16px;font-size:20px;}
.ws-pk-badge[data-size="lg"] .ws-pk-badge__shape{width:28px;height:33px;}
/* 十个段位（契约 R2 §B 的十色） */
.ws-pk-badge[data-tier="iron"]{--pk-c:#6E6A64;}
.ws-pk-badge[data-tier="bronze"]{--pk-c:#A0643A;}
.ws-pk-badge[data-tier="silver"]{--pk-c:#9AA6B2;}
.ws-pk-badge[data-tier="gold"]{--pk-c:#D4A53A;}
.ws-pk-badge[data-tier="platinum"]{--pk-c:#2FA79A;}
.ws-pk-badge[data-tier="emerald"]{--pk-c:#2E9B5B;}
.ws-pk-badge[data-tier="diamond"]{--pk-c:#4C7FD9;}
.ws-pk-badge[data-tier="master"]{--pk-c:#8B5CF6;}
.ws-pk-badge[data-tier="grandmaster"]{--pk-c:#D9463B;}
.ws-pk-badge[data-tier="challenger"]{--pk-c:#E0843F;--pk-shape:linear-gradient(135deg,#E8B54A,#D9463B);}
/* 大师以上：盾牌上方加一颗小冠（静态） */
.ws-pk-badge:is([data-tier="master"],[data-tier="grandmaster"],[data-tier="challenger"]) .ws-pk-badge__shape{clip-path:polygon(0 8%,25% 22%,50% 0,75% 22%,100% 8%,100% 60%,50% 100%,0 60%);}
/* 定级中：虚线描边 + 半透明的空盾 */
.ws-pk-badge.is-placing{--pk-c:var(--ink-soft,#777);background:color-mix(in srgb,var(--ink-soft,#777) 8%,var(--card,#fff));box-shadow:none;outline:1px dashed color-mix(in srgb,var(--ink-soft,#777) 70%,transparent);outline-offset:-1px;}
.ws-pk-badge.is-placing .ws-pk-badge__shape{background:color-mix(in srgb,var(--ink-soft,#777) 38%,transparent);}
/* 深色主题：描边再亮一点；底色段位色 14%（第三轮：原来 20%，纸墨深上墨字只有 4.22:1） */
:root:is([data-theme="dark"],[data-theme="minimal-dark"],[data-theme="supreme"],[data-theme="pixel"]) .ws-pk-badge:not(.is-placing){box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pk-c) 80%,transparent);background:color-mix(in srgb,var(--pk-c) 14%,var(--card,#1b1b1b));}
/* 旧版像素街机（只在服务器急停时出现）：方块像素盾 */
:root[data-theme="pixel"]:not(.ws-v5) .ws-pk-badge{border-radius:0;}
:root[data-theme="pixel"]:not(.ws-v5) .ws-pk-badge__shape{clip-path:polygon(25% 0,75% 0,75% 12%,100% 12%,100% 62%,75% 62%,75% 88%,50% 88%,50% 100%,50% 100%,25% 88%,25% 62%,0 62%,0 12%,25% 12%);}

/* ============ 2. 学习排行榜：点名字弹名片、名字后的徽章 ============ */
#socialPage .social-name-link{cursor:pointer;border-radius:4px;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--ink-soft) 45%,transparent);text-underline-offset:3px;}
#socialPage .social-name-link:hover{text-decoration-color:var(--accent);}
#socialPage .social-name-link:focus-visible,#socialPage .ws-pk-ladder__name:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
#socialPage .social-name .ws-pk-badge{margin-left:6px;}
#socialPage .social-name .ws-pk-badge+.social-lv{margin-left:4px;}
/* 排行榜页原有的几处小字 / 浅字（03 号与 ui-polish-v4）：字号抬到 12、颜色换成对比度够的令牌（量过九个主题都 ≥ 4.5） */
#socialPage .social-name small{font-size:12px;color:var(--ink-soft)!important;} /* 03 号给的是 11px + --ink-faint；ui-polish-apple 还给所有 small 压了 !important 的浅灰 */
#socialPage .social-row.me .social-name small{color:var(--ink)!important;} /* 「我」那一行是强调色浅底，浅灰字不够 */
#socialPage .social-lb-note,#socialPage .social-lb-note span{font-size:12px;}
#socialPage .social-lb-note span:last-child{color:var(--ink-soft);}
#socialPage .social-rank.top{color:color-mix(in srgb,var(--amber) 35%,var(--ink));}
#socialPage .social-avatar{color:var(--ws-accent-ink,var(--ink));}
#socialPage .social-lv{height:18px;font-size:12px;}
#socialPage .social-tab{min-width:0;padding:0 6px;}

/* ============ 3. 单词 PK 天梯（排行榜第三个页签） ============ */
#socialPkPanel .ws-pk-ladder__head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;font-size:12.5px;line-height:1.5;}
#socialPkPanel .ws-pk-ladder__head b{color:var(--ink);}
#socialPkPanel .ws-pk-ladder__head:empty{display:none;}
#socialPkPanel .ws-pk-ladder__classes{margin-top:-4px;}
.ws-pk-ladder{display:flex;flex-direction:column;gap:8px;}
.ws-pk-ladder__row{display:grid;grid-template-columns:34px 38px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 12px;border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:12px;background:color-mix(in srgb,var(--card) 60%,transparent);scroll-margin:80px 0;}
.ws-pk-ladder__row[data-me="1"]{border-color:var(--accent);background:var(--accent-soft);}
.ws-pk-ladder__pos{text-align:center;font-weight:900;font-size:14px;color:var(--ink-soft);font-variant-numeric:tabular-nums;}
.ws-pk-ladder__row.is-top .ws-pk-ladder__pos{color:var(--ink);}
.ws-pk-ladder__av{position:relative;overflow:hidden;}
.ws-pk-ladder__av img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block;}
#socialPage .ws-pk-ladder__av{color:var(--ink);}
.ws-pk-ladder__av[data-av="1"]{background:color-mix(in srgb,var(--amber,#d4a53a) 26%,var(--card));}
.ws-pk-ladder__av[data-av="2"]{background:color-mix(in srgb,var(--rose,#c65a5a) 22%,var(--card));}
.ws-pk-ladder__av[data-av="3"]{background:color-mix(in srgb,var(--terra,#b86a3c) 22%,var(--card));}
.ws-pk-ladder__av[data-av="4"]{background:color-mix(in srgb,var(--accent) 22%,var(--card));}
.ws-pk-ladder__av[data-av="5"]{background:color-mix(in srgb,var(--ink-soft) 20%,var(--card));}
.ws-pk-ladder__av[data-av="6"]{background:color-mix(in srgb,var(--mint,var(--accent)) 24%,var(--card));}
.ws-pk-ladder__av[data-av="7"]{background:color-mix(in srgb,var(--cyan,var(--accent)) 22%,var(--card));}
.ws-pk-ladder__who{min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;}
.ws-pk-ladder__name{min-width:0;max-width:100%;font-size:13.5px;font-weight:800;color:var(--ink);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:4px;}
/* ui-polish-apple.css 给所有 [role="button"] 加了 min-height:36px（手机），名字行被撑高 → 名字本身不撑行高，点按区域靠整行的 10px 内边距 */
#socialPage .ws-pk-ladder__name[role="button"],#socialPage .social-name-link[role="button"]{min-height:0;}
.ws-pk-ladder__metag{font-size:12px;font-weight:700;color:var(--ink);}
.ws-pk-ladder__badge{flex-basis:100%;display:flex;}
.ws-pk-ladder__badge .ws-pk-badge{margin-left:0;}
.ws-pk-ladder__lp{font-size:13px;font-weight:800;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums;}
.ws-pk-ladder__note{margin-bottom:2px;}

/* ============ 4. 名片 ============ */
.ws-pk-card{position:fixed;inset:0;z-index:12300;display:none;align-items:center;justify-content:center;padding:24px 16px;background:rgba(10,12,18,.52);}
/* ui-polish-v4 的 html.ws-v4-polish body>*{position:relative;z-index:1} 会把直挂在 body 下的弹层拉回文档流；ui-polish-apple 的
   [class*="card"] / [role="dialog"] 还会给遮罩本身加圆角和内边距 → 用 id 的权重钉死 */
#wsPkCard{position:fixed;inset:0;z-index:12300;border-radius:0!important;padding:24px 16px!important;border:0!important;box-shadow:none!important;}
.ws-pk-card.on{display:flex;}
.ws-pk-card__panel{position:relative;box-sizing:border-box;width:min(360px,100%);max-height:calc(100dvh - 48px);overflow:auto;padding:28px 22px 22px;border:1px solid var(--line);border-radius:20px;
  background:linear-gradient(var(--card),var(--card)),var(--paper);color:var(--ink);text-align:center;box-shadow:var(--shadow-lg,0 24px 60px rgba(0,0,0,.28));font-family:var(--cjk,system-ui,sans-serif);}
.ws-pk-card__close{position:absolute;top:8px;right:8px;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--ink-soft);font-size:24px;line-height:1;cursor:pointer;}
.ws-pk-card__close:hover{background:color-mix(in srgb,var(--ink-soft) 12%,transparent);color:var(--ink);}
.ws-pk-card__close:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
.ws-pk-card__avatar{width:64px;height:64px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:var(--accent-soft);color:var(--ws-accent-ink,var(--ink));font-size:26px;font-weight:900;}
.ws-pk-card__avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.ws-pk-card__name{font-size:18px;font-weight:900;line-height:1.35;overflow-wrap:anywhere;}
.ws-pk-card__lv{display:inline-block;margin-left:4px;padding:2px 7px;border-radius:999px;background:color-mix(in srgb,var(--accent) 12%,var(--card));color:var(--ink);font-size:12px;font-weight:800;vertical-align:middle;}
.ws-pk-card__me{font-size:14px;color:var(--ink-soft);font-weight:700;}
.ws-pk-card__meta{margin-top:6px;font-size:12.5px;line-height:1.6;color:var(--ink-soft);}
.ws-pk-card__rank,.ws-pk-card__peak{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:12px;font-size:13px;font-weight:700;color:var(--ink-soft);}
.ws-pk-card__rank{margin-top:16px;padding-top:14px;border-top:1px dashed color-mix(in srgb,var(--line) 90%,transparent);}
.ws-pk-card__peak:empty,.ws-pk-card__foot:empty,.ws-pk-card__meta:empty{display:none;}
.ws-pk-card__rank .ws-pk-badge,.ws-pk-card__peak .ws-pk-badge{margin:0;}
.ws-pk-card__foot{margin-top:16px;}
.ws-pk-card__btn{min-height:44px;padding:0 18px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font:inherit;font-size:14px;font-weight:800;cursor:pointer;}
/* ui-polish-apple.css 的 :where([class*="card"]) 会给名片里每个类名带 card 的子元素加卡片内边距 / 圆角 / 阴影（手机上还带 !important），
   ui-polish-v4.css 的 :where([class*="card"]) 再加一层阴影 → 这里用 id 权重 + !important 清掉，只留名片自己要的样子 */
#wsPkCard .ws-pk-card__panel{padding:28px 22px 22px!important;border-radius:20px!important;box-shadow:var(--shadow-lg,0 24px 60px rgba(0,0,0,.28))!important;}
#wsPkCard :is(.ws-pk-card__avatar,.ws-pk-card__name,.ws-pk-card__lv,.ws-pk-card__me,.ws-pk-card__meta,.ws-pk-card__rank,.ws-pk-card__peak,.ws-pk-card__foot){padding:0!important;box-shadow:none!important;}
#wsPkCard :is(.ws-pk-card__name,.ws-pk-card__me,.ws-pk-card__meta,.ws-pk-card__rank,.ws-pk-card__peak,.ws-pk-card__foot){border-radius:0!important;background:none;border-left:0;border-right:0;border-bottom:0;}
#wsPkCard :is(.ws-pk-card__name,.ws-pk-card__meta,.ws-pk-card__peak,.ws-pk-card__foot){border-top:0;}
#wsPkCard .ws-pk-card__avatar{border-radius:50%!important;border:0;}
#wsPkCard .ws-pk-card__lv{padding:2px 7px!important;border-radius:999px!important;border:0;}
#wsPkCard .ws-pk-card__rank{padding-top:14px!important;}
#wsPkCard .ws-pk-card__close{padding:0!important;border-radius:50%!important;box-shadow:none!important;min-height:0;}
#wsPkCard .ws-pk-card__btn{padding:0 18px!important;border-radius:12px!important;box-shadow:none!important;}
@media (prefers-reduced-motion:no-preference){
  .ws-pk-card.on .ws-pk-card__panel{animation:wsPkCardIn .22s cubic-bezier(.22,1,.36,1) both;}
}
@keyframes wsPkCardIn{from{opacity:0;transform:translateY(8px) scale(.98);}to{opacity:1;transform:none;}}

/* ============ 5. 旧版首页段位条（电脑：今日计划卡里 4 个小游戏按钮下面；手机：PK 那排按钮下面） ============ */
.ws-pk-strip{box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;margin:10px 0 0;padding:10px 12px;min-height:52px;
  border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--accent) 7%,var(--card));
  color:var(--ink);font-family:var(--cjk,inherit);text-align:left;cursor:pointer;}
.ws-pk-strip:hover{background:color-mix(in srgb,var(--accent) 12%,var(--card));}
.ws-pk-strip:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.ws-pk-strip__icon{flex:none;font-size:20px;line-height:1;}
.ws-pk-strip__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;}
.ws-pk-strip__top{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font-size:13.5px;font-weight:800;min-width:0;}
.ws-pk-strip__top .ws-pk-badge{margin:0;}
.ws-pk-strip__tag{font-size:12px;font-weight:800;padding:3px 8px;border-radius:999px;background:color-mix(in srgb,var(--accent) 14%,var(--card));color:var(--ink);}
.ws-pk-strip__prog{display:inline-flex;align-items:center;gap:7px;min-width:0;flex:1 1 150px;}
.ws-pk-strip__lpt{font-size:12px;font-weight:800;color:var(--ink-soft);white-space:nowrap;font-variant-numeric:tabular-nums;}
.ws-pk-strip__lp{flex:1;min-width:48px;max-width:180px;height:6px;border-radius:999px;background:color-mix(in srgb,var(--ink-soft) 18%,transparent);overflow:hidden;}
.ws-pk-strip__lp>i{display:block;height:100%;border-radius:inherit;background:var(--accent);}
.ws-pk-strip__win{font-size:12px;font-weight:800;white-space:nowrap;padding:3px 8px;border-radius:999px;background:color-mix(in srgb,var(--amber,#d4a53a) 20%,var(--card));color:var(--ink);}
.ws-pk-strip__win.is-done{background:color-mix(in srgb,var(--ink-soft) 10%,var(--card));color:var(--ink-soft);}
.ws-pk-strip__sub{font-size:12px;line-height:1.4;color:var(--ink-soft);}
.ws-pk-strip__go{flex:none;font-size:22px;line-height:1;color:var(--ink-soft);}
#mobileHome .ws-pk-strip{margin-top:10px;}
/* 新手安静首页：电脑端 4 个小游戏入口本来就收起，段位条跟着收；手机端只留 PK 按钮本身 */
body.new-user-quiet-home .ws-pk-strip{display:none!important;}

/* ============ 6. 旧版账户页单词 PK 卡（#wsPkAcct） ============ */
.ws-pk-acct{box-sizing:border-box;margin:14px 0;padding:16px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--accent) 5%,var(--card));color:var(--ink);}
.ws-pk-acct[hidden]{display:none!important;}
.ws-pk-acct__head{display:flex;align-items:center;gap:14px;min-width:0;}
.ws-pk-acct__icon{font-size:30px;line-height:1;}
.ws-pk-acct__title{display:flex;flex-direction:column;gap:3px;min-width:0;}
.ws-pk-acct__title b{font-size:16px;font-weight:900;}
.ws-pk-acct__title>span{font-size:12.5px;color:var(--ink-soft);line-height:1.5;}
.ws-pk-acct__today{font-size:12px;font-weight:700;color:var(--ink-soft);}
.ws-pk-acct__prog{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:12.5px;font-weight:700;color:var(--ink-soft);}
.ws-pk-acct__prog .ws-pk-strip__lp{max-width:none;}
.ws-pk-acct__stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px;}
.ws-pk-acct__stats>div{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;border-radius:12px;background:color-mix(in srgb,var(--ink-soft) 8%,transparent);text-align:center;}
.ws-pk-acct__stats b{font-size:15px;font-weight:900;font-variant-numeric:tabular-nums;}
html body #wsPkAcct#wsPkAcct .ws-pk-acct__stats span{font-size:12px;color:color-mix(in srgb,var(--ink-soft) 45%,var(--ink))!important;} /* 12 号给账户页所有 span 压了 !important 的 --ink-soft，在统计小格的浅底上不够 4.5 */
.ws-pk-acct__loading{margin-top:10px;font-size:12.5px;color:var(--ink-soft);}
.ws-pk-acct__peaks{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:12px;}
.ws-pk-acct__peak{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-soft);font-weight:700;}
.ws-pk-acct__peak .ws-pk-badge{margin:0;}
.ws-pk-acct__peak em{font-style:normal;font-size:12px;}
.ws-pk-acct__hist{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:10px;font-size:12.5px;color:var(--ink-soft);font-weight:700;}
.ws-pk-acct__season{display:inline-flex;align-items:center;gap:4px;}
.ws-pk-acct__season em{font-style:normal;font-size:12px;}
.ws-pk-acct__season .ws-pk-badge{margin:0;}
.ws-pk-acct__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.ws-pk-acct__btn{min-height:40px;padding:0 16px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font:inherit;font-size:14px;font-weight:800;cursor:pointer;}
.ws-pk-acct__btn.is-primary{border-color:transparent;background:var(--accent);color:var(--on-accent,#fff);} /* --on-accent 是各主题专门给「强调色上的字」的令牌（对比度 ≥ 4.5） */
@media (max-width:768px){
  .ws-pk-acct{margin:10px 0 14px;padding:14px;}
  .ws-pk-acct__stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ws-pk-acct__btn{flex:1 1 120px;}
}

/* ============ 7. 新版界面：旧版专属的段位条 / 账户卡收起（新版的入口卡与「我的」页卡在 17 / 19 / 21 / 25） ============ */
html.ws-v5 .ws-pk-strip,html.ws-v5 #wsPkAcct{display:none!important;}