/* ============================================================
 *  合成元素 Element Craft —— 样式表
 *  深空主题 / 玻璃拟态 / 稀有度光效
 * ============================================================ */

/* ---------- 基础 ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

:root {
  --bg: #05070f;
  --panel: rgba(19, 24, 42, 0.74);
  --panel-solid: #131a2b;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --text: #e9eefb;
  --dim: #8993ab;
  --dim2: #5d6784;
  --accent: #7c5cff;
  --accent2: #22d3ee;
  --accent3: #f472b6;
  --ok: #4ade80;
  --bad: #fb7185;
  --radius: 16px;
  --chip: 84px;
  --font: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Noto Sans SC",
          system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --emoji-font: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}

html, body { height: 100%; margin: 0; }

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 深空背景 */
body::before {
  content: "";
  position: fixed; inset: -20%;
  background:
    radial-gradient(42% 34% at 18% 12%, rgba(124, 92, 255, 0.28), transparent 62%),
    radial-gradient(36% 30% at 84% 18%, rgba(34, 211, 238, 0.20), transparent 64%),
    radial-gradient(40% 34% at 72% 88%, rgba(244, 114, 182, 0.18), transparent 66%),
    radial-gradient(46% 40% at 12% 84%, rgba(56, 189, 248, 0.14), transparent 68%);
  filter: blur(14px);
  animation: driftbg 34s ease-in-out infinite alternate;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}
body::after {
  content: "";
  position: fixed; inset: 0;
  background-image:
    radial-gradient(1.4px 1.4px at 20% 30%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.2px 1.2px at 70% 12%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.6px 1.6px at 42% 76%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.1px 1.1px at 88% 62%, rgba(255,255,255,.35), transparent),
    radial-gradient(1.3px 1.3px at 8% 58%, rgba(255,255,255,.3), transparent);
  background-size: 520px 520px, 380px 380px, 640px 640px, 460px 460px, 300px 300px;
  opacity: .55;
  z-index: 0; pointer-events: none;
}
@keyframes driftbg {
  0% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(2%, -1.5%, 0) scale(1.06); }
  100% { transform: translate3d(-2%, 1.5%, 0) scale(1.02); }
}

button, input { font-family: inherit; }

/* ---------- 布局 ---------- */
#app {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  --shake: 0px;
}
#app.shaking { animation: appShake 0.46s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
@keyframes appShake {
  0%, 100% { transform: translate(0, 0); }
  12% { transform: translate(calc(var(--shake) * -1), calc(var(--shake) * 0.45)) rotate(-0.18deg); }
  28% { transform: translate(var(--shake), calc(var(--shake) * -0.55)) rotate(0.18deg); }
  44% { transform: translate(calc(var(--shake) * -0.7), calc(var(--shake) * 0.3)); }
  60% { transform: translate(calc(var(--shake) * 0.65), calc(var(--shake) * 0.45)); }
  76% { transform: translate(calc(var(--shake) * -0.35), calc(var(--shake) * -0.25)); }
  90% { transform: translate(calc(var(--shake) * 0.25), calc(var(--shake) * 0.12)); }
}

/* ---------- 顶栏 ---------- */
.topbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(12, 16, 30, 0.9), rgba(12, 16, 30, 0.55));
  backdrop-filter: blur(14px);
}

.brand { display: flex; align-items: center; gap: 11px; flex: none; }
.brand-orb {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  font-size: 24px; font-family: var(--emoji-font);
  border-radius: 14px;
  background: linear-gradient(140deg, rgba(124, 92, 255, .35), rgba(34, 211, 238, .22));
  border: 1px solid var(--line-strong);
  box-shadow: 0 0 26px -8px rgba(124, 92, 255, .9), inset 0 0 18px -8px rgba(255,255,255,.6);
  animation: orbPulse 4.5s ease-in-out infinite;
}
@keyframes orbPulse {
  0%, 100% { box-shadow: 0 0 22px -10px rgba(124,92,255,.9), inset 0 0 18px -8px rgba(255,255,255,.5); }
  50% { box-shadow: 0 0 34px -6px rgba(34,211,238,.85), inset 0 0 22px -6px rgba(255,255,255,.7); }
}
.brand-text h1 {
  margin: 0; font-size: 19px; letter-spacing: 2px; font-weight: 800;
  background: linear-gradient(92deg, #fff, #c4b5fd 42%, #67e8f9);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand-text p { margin: 2px 0 0; font-size: 11px; color: var(--dim2); letter-spacing: .6px; }

.progress-wrap { flex: 1; min-width: 120px; max-width: 460px; }
.progress-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11.5px; color: var(--dim); margin-bottom: 5px; letter-spacing: .4px;
}
.progress-label b { color: var(--text); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.progress-bar {
  height: 8px; border-radius: 99px; overflow: hidden;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
.progress-bar.slim { height: 6px; }
.progress-bar i {
  display: block; height: 100%; width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent2) 60%, var(--accent3));
  box-shadow: 0 0 12px rgba(124, 92, 255, .8);
  transition: width .5s cubic-bezier(.2, .8, .3, 1);
}

.actions { display: flex; gap: 9px; flex: none; }

.btn {
  appearance: none; border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  padding: 9px 14px; border-radius: 11px;
  font-size: 13px; font-weight: 600; letter-spacing: .3px;
  cursor: pointer;
  transition: transform .12s ease, background .2s ease, border-color .2s ease, box-shadow .2s;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.btn:hover { background: rgba(255, 255, 255, 0.11); border-color: rgba(255,255,255,.26); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.97); }
.btn.primary {
  background: linear-gradient(135deg, rgba(124, 92, 255, .95), rgba(34, 211, 238, .8));
  border-color: transparent; color: #fff;
  box-shadow: 0 6px 20px -8px rgba(124, 92, 255, 1);
}
.btn.primary:hover { box-shadow: 0 8px 26px -6px rgba(124, 92, 255, 1); }
.btn.icon { padding: 9px 11px; font-size: 15px; }
.btn.tiny { padding: 5px 10px; font-size: 11.5px; border-radius: 9px; color: var(--dim); }
.btn.tiny:hover { color: var(--text); }

.ach-badge {
  font-size: 12px; color: var(--dim); padding: 7px 11px;
  font-variant-numeric: tabular-nums;
  cursor: pointer; border-radius: 11px;
  border: 1px solid transparent;
  transition: all .18s ease;
  white-space: nowrap;
}
.ach-badge:hover { color: var(--text); background: rgba(255, 255, 255, .08); border-color: rgba(251, 191, 36, .4); }
.ach-badge b { color: #fbbf24; }

/* ---------- 主舞台 ---------- */
.stage {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 404px;
  gap: 14px;
  padding: 14px;
}

.panel {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 0;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--line);
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 50px -30px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.panel-head {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 15px;
  border-bottom: 1px solid var(--line);
}
.panel-title { font-size: 13.5px; font-weight: 700; letter-spacing: 1px; color: #cdd6ec; }
.panel-tools { display: flex; align-items: center; gap: 8px; }
.chip-count, .lib-count { font-size: 11.5px; color: var(--dim2); font-variant-numeric: tabular-nums; }

/* ---------- 工作区 ---------- */
.ws-surface {
  position: relative;
  flex: 1; min-height: 0;
  overflow: hidden;
  touch-action: none;
}
.ws-grid-bg {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.075) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(120% 100% at 50% 45%, #000 45%, transparent 100%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 45%, #000 45%, transparent 100%);
  pointer-events: none;
}

.ws-empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; pointer-events: none;
  color: var(--dim2); transition: opacity .3s ease;
}
.ws-empty-orb {
  font-size: 54px; font-family: var(--emoji-font);
  filter: drop-shadow(0 0 26px rgba(124, 92, 255, .8));
  animation: floaty 3.4s ease-in-out infinite;
}
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-10px) rotate(4deg); } }
.ws-empty .line1 { margin: 6px 0 0; font-size: 15px; color: #9aa5be; letter-spacing: .5px; }
.ws-empty .line1 b { color: #e9eefb; }
.ws-empty .line2 { margin: 0; font-size: 12.5px; color: var(--dim2); }

/* ---------- 工作区元素块 ---------- */
.chip {
  position: absolute;
  width: var(--chip); height: var(--chip);
  border-radius: 22px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
  cursor: grab;
  user-select: none; -webkit-user-select: none;
  background: linear-gradient(160deg, rgba(255,255,255,.11), rgba(255,255,255,.03));
  border: 1px solid var(--line-strong);
  box-shadow: 0 10px 24px -14px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.12);
  transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
  will-change: transform;
  z-index: 2;
  touch-action: none;
}
.chip:hover { border-color: rgba(255,255,255,.3); box-shadow: 0 14px 30px -14px rgba(0,0,0,1), 0 0 22px -12px rgba(124,92,255,.9); }
.chip .chip-emoji { font-size: 33px; line-height: 1; font-family: var(--emoji-font); filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); pointer-events: none; }
.chip .chip-name { font-size: 11px; color: #aab4cc; letter-spacing: .3px; pointer-events: none; }

.r1 { --rc: 148, 163, 184; }
.r2 { --rc: 74, 222, 128; }
.r3 { --rc: 56, 189, 248; }
.r4 { --rc: 167, 139, 250; }
.r5 { --rc: 244, 114, 182; }
.r6 { --rc: 251, 191, 36; }

.chip.r1, .chip.r2, .chip.r3, .chip.r4, .chip.r5, .chip.r6 {
  background: linear-gradient(160deg, rgba(var(--rc), .22), rgba(var(--rc), .05));
  border-color: rgba(var(--rc), .45);
}
.chip.r6 {
  background: linear-gradient(150deg, rgba(251,191,36,.28), rgba(244,114,182,.18), rgba(124,92,255,.22));
  border-color: rgba(251, 191, 36, .6);
  box-shadow: 0 10px 30px -12px rgba(251,191,36,.7), inset 0 1px 0 rgba(255,255,255,.2);
}

.chip.dragging {
  pointer-events: none;
  cursor: grabbing;
  z-index: 40;
  transform: scale(1.1) !important;
  box-shadow: 0 26px 50px -18px rgba(0,0,0,1), 0 0 34px -8px rgba(124,92,255,1) !important;
  border-color: rgba(255,255,255,.5) !important;
}
.chip.merge-target { border-color: rgba(74, 222, 128, .9) !important; box-shadow: 0 0 0 2px rgba(74,222,128,.35), 0 0 30px -6px rgba(74,222,128,.95) !important; }
.chip.merge-bad { border-color: rgba(251, 113, 133, .75) !important; }
.chip.nope { animation: nope .34s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes nope {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-7px) rotate(-2.5deg); }
  45% { transform: translateX(6px) rotate(2.5deg); }
  70% { transform: translateX(-4px) rotate(-1.5deg); }
  88% { transform: translateX(3px); }
}
.chip.pop-in { animation: chipPop .5s cubic-bezier(.16, 1.3, .3, 1) both; }
@keyframes chipPop {
  0% { transform: scale(0.1) rotate(-25deg); opacity: 0; }
  55% { transform: scale(1.16) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.chip.dying { pointer-events: none; }

/* ---------- 元素栏 ---------- */
.lib-search-wrap { flex: none; padding: 10px 12px 0; }
.lib-search {
  width: 100%;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.28);
  color: var(--text);
  font-size: 12.5px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.lib-search::placeholder { color: var(--dim2); }
.lib-search:focus { border-color: rgba(124, 92, 255, .8); box-shadow: 0 0 0 3px rgba(124, 92, 255, .18); }

.lib-tabs { flex: none; display: flex; gap: 6px; padding: 10px 12px; }
.lib-tabs button {
  flex: 1;
  appearance: none; cursor: pointer;
  padding: 6px 4px;
  font-size: 11.5px; font-weight: 600;
  color: var(--dim);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
  border-radius: 9px;
  transition: all .18s ease;
}
.lib-tabs button:hover { color: var(--text); background: rgba(255, 255, 255, 0.09); }
.lib-tabs button.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(124, 92, 255, .85), rgba(34, 211, 238, .55));
  box-shadow: 0 6px 16px -10px rgba(124, 92, 255, 1);
}

.lib-grid {
  flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  padding: 4px 12px 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  gap: 8px;
  align-content: start;
  align-items: start;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.16) transparent;
}
.lib-grid::-webkit-scrollbar { width: 8px; }
.lib-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 8px; }
.lib-grid::-webkit-scrollbar-track { background: transparent; }

.tile {
  position: relative;
  height: 68px;
  content-visibility: auto;          /* 500 个卡片时大幅降低渲染成本 */
  contain-intrinsic-size: 68px 68px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.045);
  cursor: grab;
  user-select: none; -webkit-user-select: none;
  transition: transform .14s ease, box-shadow .2s, border-color .2s, background .2s;
  touch-action: none;
  overflow: hidden;
}
.tile .tile-emoji { font-size: 25px; line-height: 1; font-family: var(--emoji-font); pointer-events: none; }
.tile .tile-name {
  font-size: 10px; color: var(--dim); letter-spacing: .2px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  pointer-events: none; padding: 0 2px;
}
.tile.unlocked:hover { transform: translateY(-2px) scale(1.04); border-color: rgba(255,255,255,.32); }
.tile.unlocked:active { cursor: grabbing; transform: scale(.96); }
.tile.r1, .tile.r2, .tile.r3, .tile.r4, .tile.r5, .tile.r6 {
  background: linear-gradient(160deg, rgba(var(--rc), .2), rgba(var(--rc), .04));
  border-color: rgba(var(--rc), .34);
}
.tile.r6 { border-color: rgba(251,191,36,.55); box-shadow: 0 0 16px -8px rgba(251,191,36,.9); }
.tile.r5 { box-shadow: 0 0 14px -9px rgba(244,114,182,.9); }

.tile.locked { cursor: not-allowed; background: rgba(255, 255, 255, 0.016); border-color: rgba(255,255,255,.045); }
.tile.locked .tile-emoji { font-size: 16px; font-weight: 900; color: #2e3550; letter-spacing: 0; font-family: var(--font); }
.tile.locked .tile-name { color: #2a3048; }
.tile.locked::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 7px, transparent 7px 14px);
  pointer-events: none;
}

.tile.dragging-src { opacity: .3; transform: scale(.9); }
.tile.is-new::before {
  content: ""; position: absolute; top: 5px; right: 5px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #4ade80; box-shadow: 0 0 9px #4ade80;
  animation: newDot 1.3s ease-in-out infinite;
}
@keyframes newDot { 0%,100% { transform: scale(.75); opacity: .6; } 50% { transform: scale(1.25); opacity: 1; } }

.tile.just-unlocked { animation: tileUnlock .8s cubic-bezier(.16, 1.3, .3, 1) both; }
@keyframes tileUnlock {
  0% { transform: scale(1); }
  30% { transform: scale(1.28) rotate(7deg); box-shadow: 0 0 34px -2px currentColor; }
  60% { transform: scale(.94) rotate(-4deg); }
  100% { transform: scale(1) rotate(0); }
}

.lib-empty { grid-column: 1 / -1; text-align: center; color: var(--dim2); font-size: 12px; padding: 30px 10px; }

/* ---------- 拖拽幽灵 ---------- */
.drag-ghost {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  width: 74px; height: 74px;
  margin: -37px 0 0 -37px;
  border-radius: 20px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
  background: linear-gradient(160deg, rgba(var(--rc, 124,92,255), .34), rgba(255,255,255,.08));
  border: 1px solid rgba(255,255,255,.4);
  box-shadow: 0 22px 44px -14px rgba(0,0,0,1), 0 0 34px -8px rgba(124,92,255,.95);
  backdrop-filter: blur(6px);
  animation: ghostIn .14s ease-out both;
}
@keyframes ghostIn { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
.drag-ghost .chip-emoji { font-size: 30px; line-height: 1; font-family: var(--emoji-font); }
.drag-ghost .chip-name { font-size: 10px; color: #dbe3f5; }

/* ---------- 弹窗 ---------- */
.modal { position: fixed; inset: 0; z-index: 800; display: grid; place-items: center; }
.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(3, 5, 12, 0.72);
  backdrop-filter: blur(9px);
  animation: fadeIn .22s ease both;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-panel {
  position: relative;
  width: min(1180px, 94vw);
  height: min(830px, 90vh);
  display: flex; flex-direction: column;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(22, 27, 46, .97), rgba(13, 17, 31, .98));
  border: 1px solid var(--line-strong);
  box-shadow: 0 50px 120px -40px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, .08);
  overflow: hidden;
  animation: modalIn .3s cubic-bezier(.16, 1.1, .3, 1) both;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }

.modal-head {
  flex: none;
  display: flex; align-items: center; gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .02);
}
.modal-title-wrap { display: flex; flex-direction: column; gap: 7px; flex: none; }
.modal-title-wrap h2 { margin: 0; font-size: 17px; letter-spacing: 1.5px; font-weight: 800; }
.wiki-progress { display: flex; align-items: center; gap: 9px; font-size: 11px; color: var(--dim); }
.wiki-progress .progress-bar { width: 130px; }

.modal-tabs { display: flex; gap: 7px; flex: none; }
.modal-tabs button {
  appearance: none; cursor: pointer;
  padding: 9px 16px; border-radius: 11px;
  font-size: 13px; font-weight: 700; letter-spacing: .5px;
  color: var(--dim);
  background: rgba(255, 255, 255, .045);
  border: 1px solid transparent;
  transition: all .18s ease;
}
.modal-tabs button:hover { color: var(--text); background: rgba(255,255,255,.1); }
.modal-tabs button.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(124, 92, 255, .9), rgba(34, 211, 238, .6));
  box-shadow: 0 8px 22px -12px rgba(124, 92, 255, 1);
}

.wiki-tools { display: flex; align-items: center; gap: 10px; flex: 1; justify-content: flex-end; }
.wiki-tools .lib-search { width: 190px; }
.wiki-tools .lib-tabs { padding: 0; flex: none; }
.wiki-tools .lib-tabs button { padding: 7px 13px; flex: none; }
.modal-close { margin-left: 4px; }

.modal-body {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 322px;
}
.modal-body.ach-body { grid-template-columns: minmax(0, 1fr); }

.wiki-grid {
  min-height: 0;
  overflow-y: auto;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
  gap: 10px;
  align-content: start;
  align-items: start;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.16) transparent;
}
.wiki-grid::-webkit-scrollbar { width: 9px; }
.wiki-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 9px; }

.wcard {
  position: relative;
  height: 84px;
  content-visibility: auto;
  contain-intrinsic-size: 84px 84px;
  border-radius: 15px;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(var(--rc, 148,163,184), .18), rgba(255,255,255,.03));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; cursor: pointer;
  transition: transform .14s ease, box-shadow .2s, border-color .2s;
  overflow: hidden;
}
.wcard:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.34); box-shadow: 0 12px 26px -14px rgba(0,0,0,1); }
.wcard.selected { border-color: rgba(124, 92, 255, .95); box-shadow: 0 0 0 2px rgba(124,92,255,.3), 0 10px 28px -14px rgba(124,92,255,1); }
.wcard .wcard-emoji { font-size: 28px; line-height: 1; font-family: var(--emoji-font); }
.wcard .wcard-name { font-size: 10.5px; color: var(--dim); }
.wcard.locked { background: rgba(255,255,255,.022); border-color: rgba(255,255,255,.05); cursor: default; }
.wcard.locked:hover { transform: none; border-color: rgba(255,255,255,.05); box-shadow: none; }
.wcard.locked .wcard-emoji { font-size: 21px; font-weight: 900; color: #39415c; }
.wcard.locked .wcard-name { color: #333a52; }
.wcard.dim { opacity: .5; }
.wcard.is-new::before {
  content: ""; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px;
  border-radius: 50%; background: #4ade80; box-shadow: 0 0 9px #4ade80;
}

/* 详情栏 */
.wiki-detail {
  min-height: 0;
  overflow-y: auto;
  padding: 18px;
  border-left: 1px solid var(--line);
  background: rgba(0, 0, 0, .2);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.16) transparent;
}
.wiki-detail::-webkit-scrollbar { width: 8px; }
.wiki-detail::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 8px; }

.detail-empty { color: var(--dim2); font-size: 12.5px; line-height: 1.9; text-align: center; padding-top: 44px; }
.detail-empty .big { font-size: 40px; font-family: var(--emoji-font); display: block; margin-bottom: 10px; opacity: .8; }

.detail-hero { display: flex; align-items: center; gap: 13px; margin-bottom: 12px; }
.detail-orb {
  width: 72px; height: 72px; flex: none;
  border-radius: 20px;
  display: grid; place-items: center;
  font-size: 38px; font-family: var(--emoji-font);
  background: linear-gradient(160deg, rgba(var(--rc, 148,163,184), .3), rgba(255,255,255,.05));
  border: 1px solid rgba(var(--rc, 148,163,184), .5);
  box-shadow: 0 0 30px -10px rgba(var(--rc, 148,163,184), 1);
}
.detail-orb.unknown { color: #39415c; font-weight: 900; font-size: 30px; }
.detail-meta h3 { margin: 0 0 4px; font-size: 19px; letter-spacing: .8px; }
.detail-stars { font-size: 12px; letter-spacing: 2px; color: #fbbf24; }
.detail-stars .off { color: #39415c; }
.detail-sub { font-size: 11px; color: var(--dim2); margin-top: 3px; }

.detail-desc {
  font-size: 12.5px; line-height: 1.85; color: #b6c0d8;
  padding: 11px 13px; border-radius: 11px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  margin-bottom: 14px;
}

.detail-section-title {
  font-size: 11.5px; font-weight: 700; letter-spacing: 1.4px;
  color: var(--dim2); text-transform: uppercase;
  margin: 16px 0 9px;
}

.recipe-row {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
  padding: 9px 10px; border-radius: 12px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--line);
  margin-bottom: 8px;
}
.recipe-part {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 42px;
}
.recipe-part .rp-emoji { font-size: 20px; font-family: var(--emoji-font); line-height: 1.2; }
.recipe-part .rp-name { font-size: 9.5px; color: var(--dim2); }
.recipe-part.miss .rp-emoji { filter: grayscale(1) opacity(.35); }
.recipe-plus, .recipe-eq { color: var(--dim2); font-size: 14px; font-weight: 700; }
.recipe-badge {
  margin-left: auto; font-size: 9px; padding: 2px 7px; border-radius: 99px;
  background: rgba(74, 222, 128, .16); color: #86efac; border: 1px solid rgba(74,222,128,.3);
  white-space: nowrap;
}
.recipe-badge.no { background: rgba(251, 113, 133, .12); color: #fda4af; border-color: rgba(251,113,133,.28); }

.detail-hint {
  font-size: 12px; line-height: 1.8; color: #cbd5e1;
  padding: 12px 13px; border-radius: 12px;
  background: linear-gradient(140deg, rgba(124,92,255,.16), rgba(34,211,238,.08));
  border: 1px solid rgba(124, 92, 255, .35);
}

/* ---------- 成就 ---------- */
.ach-list {
  min-height: 0;
  overflow-y: auto;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
  align-content: start;
  align-items: start;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.16) transparent;
}
.ach-list::-webkit-scrollbar { width: 9px; }
.ach-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 9px; }

.ach-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .035);
  cursor: pointer;
  transition: transform .14s ease, border-color .2s, background .2s, box-shadow .2s;
}
.ach-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.26); }
.ach-card.done {
  background: linear-gradient(140deg, rgba(251, 191, 36, .14), rgba(255,255,255,.03));
  border-color: rgba(251, 191, 36, .45);
  box-shadow: 0 8px 26px -18px rgba(251, 191, 36, 1);
}
.ach-card.done:hover { box-shadow: 0 0 0 1px rgba(251,191,36,.4), 0 10px 30px -18px rgba(251,191,36,1); }
.ach-card.selected { border-color: rgba(124, 92, 255, .95); box-shadow: 0 0 0 2px rgba(124,92,255,.3); }
.ach-card.hidden-locked { opacity: .55; }

.ach-icon {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  border-radius: 13px;
  font-size: 23px; font-family: var(--emoji-font);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
  filter: grayscale(1) opacity(.45);
}
.ach-card.done .ach-icon {
  filter: none;
  background: linear-gradient(150deg, rgba(251, 191, 36, .3), rgba(244, 114, 182, .18));
  border-color: rgba(251, 191, 36, .55);
  box-shadow: 0 0 22px -10px rgba(251, 191, 36, 1);
}
.ach-body { min-width: 0; flex: 1; }
.ach-name {
  font-size: 13.5px; font-weight: 700; letter-spacing: .3px;
  margin-bottom: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ach-card.done .ach-name { color: #fde68a; }
.ach-desc { font-size: 11.5px; color: var(--dim); line-height: 1.6; }
.ach-tag {
  flex: none; font-size: 9.5px; padding: 2px 8px; border-radius: 99px;
  border: 1px solid var(--line); color: var(--dim2); white-space: nowrap;
}
.ach-cat-milestone { color: #7dd3fc; border-color: rgba(125,211,252,.35); background: rgba(125,211,252,.1); }
.ach-cat-rare { color: #fbbf24; border-color: rgba(251,191,36,.35); background: rgba(251,191,36,.1); }
.ach-cat-fun { color: #f9a8d4; border-color: rgba(249,168,212,.35); background: rgba(249,168,212,.1); }
.ach-cat-stat { color: #86efac; border-color: rgba(134,239,172,.35); background: rgba(134,239,172,.1); }

/* ---------- 特效层 ---------- */
#fx-canvas {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 900;
}
#flash {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 890;
  opacity: 0;
}
#flash.on { animation: flashAnim .42s ease-out both; }
@keyframes flashAnim { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }

.fly-emoji {
  position: fixed;
  z-index: 950;
  pointer-events: none;
  font-size: 34px;
  font-family: var(--emoji-font);
  opacity: 0;
  filter: drop-shadow(0 0 14px rgba(255, 255, 255, .9));
  animation: flyTo .78s cubic-bezier(.45, -0.28, .55, 1) forwards;
}
@keyframes flyTo {
  0%   { opacity: 0; transform: translate(0, 0) scale(.45) rotate(0deg); }
  14%  { opacity: 1; transform: translate(calc(var(--tx) * .09), calc(var(--ty) * .09)) scale(1.2) rotate(-14deg); }
  84%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(.38) rotate(300deg); }
}

/* ---------- 鼠标反馈 ---------- */
#app { cursor: default; }
#app.dragging, #app.dragging * { cursor: grabbing !important; user-select: none !important; }
#app, #app * { -webkit-user-select: none; user-select: none; }
input, textarea { -webkit-user-select: text; user-select: text; }
.tile.unlocked:active, .chip:active { cursor: grabbing; }
.lib-search, .btn, .lib-tabs button, .navtabs button, .dlc-action { cursor: pointer; }

/* 新元素横幅 */
.banner {
  position: fixed; inset: 0;
  z-index: 940;
  display: grid; place-items: center;
  pointer-events: none;
}
.banner.show .banner-inner { animation: bannerIn 3.2s cubic-bezier(.16, 1.1, .3, 1) both; }
.banner.show .banner-emoji { animation: bannerEmoji 3.2s cubic-bezier(.16, 1.3, .3, 1) both; }
.banner-inner {
  position: relative;
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;                 /* 关键：默认隐藏，避免收起时闪一下 */
  min-width: 300px;
  padding: 30px 46px 26px;
  border-radius: 26px;
  text-align: center;
  background: linear-gradient(170deg, rgba(28, 34, 58, .96), rgba(12, 16, 30, .97));
  border: 1px solid rgba(var(--rc, 124, 92, 255), .6);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .05),
    0 40px 90px -40px #000,
    0 0 90px -30px rgba(var(--rc, 124, 92, 255), 1);
  overflow: hidden;
}
.banner-inner::before {
  content: "";
  position: absolute; inset: -60%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(var(--rc, 124,92,255), .55) 40deg, transparent 90deg,
              transparent 180deg, rgba(255,255,255,.28) 215deg, transparent 260deg);
  animation: sweep 3.4s linear infinite;
  z-index: 0;
}
@keyframes sweep { to { transform: rotate(360deg); } }
.banner-inner > * { position: relative; z-index: 1; }

.banner-emoji {
  font-size: 76px; line-height: 1;
  font-family: var(--emoji-font);
  filter: drop-shadow(0 0 30px rgba(var(--rc, 124,92,255), 1));
  margin-bottom: 8px;
}
.banner-label {
  font-size: 11px; letter-spacing: 6px; color: rgba(var(--rc, 124,92,255), 1);
  text-transform: uppercase; margin-bottom: 6px;
}
.banner-name {
  font-size: 30px; font-weight: 900; letter-spacing: 4px;
  background: linear-gradient(92deg, #fff, rgba(var(--rc, 255,255,255), 1) 50%, #fff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.banner-stars { margin-top: 5px; font-size: 14px; letter-spacing: 4px; color: #fbbf24; }
.banner-stars .off { color: #3a425e; }
.banner-desc { margin-top: 11px; font-size: 12.5px; color: #a9b4cd; max-width: 330px; line-height: 1.7; }

@keyframes bannerIn {
  0% { opacity: 0; transform: scale(.62) translateY(28px); }
  9% { opacity: 1; transform: scale(1.06) translateY(0); }
  14% { transform: scale(1); }
  84% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.94) translateY(-18px); }
}
@keyframes bannerEmoji {
  0% { transform: scale(0) rotate(-140deg); }
  12% { transform: scale(1.35) rotate(12deg); }
  22% { transform: scale(1) rotate(0); }
  84% { transform: scale(1) rotate(0); }
  100% { transform: scale(.8) rotate(20deg); opacity: 0; }
}

/* ---------- 版本徽章与更新公告 ---------- */
.ver-badge {
  font-style: normal;
  font-size: 11px; font-weight: 800; letter-spacing: 1px;
  padding: 2px 8px; border-radius: 99px;
  vertical-align: 3px; margin-left: 6px;
  background: linear-gradient(135deg, rgba(124,92,255,.9), rgba(34,211,238,.7));
  color: #fff;
  box-shadow: 0 4px 14px -6px rgba(124,92,255,1);
}

.news-list {
  grid-column: 1 / -1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 22px 30px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.16) transparent;
}
.news-list::-webkit-scrollbar { width: 9px; }
.news-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 9px; }

.news-card {
  position: relative;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.014));
  padding: 20px 24px 22px;
  margin-bottom: 18px;
}
.news-card.current {
  border-color: rgba(124, 92, 255, .6);
  box-shadow: 0 0 50px -30px rgba(124, 92, 255, 1), inset 0 1px 0 rgba(255,255,255,.06);
}
.news-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.news-ver {
  font-size: 20px; font-weight: 900; letter-spacing: 2px;
  background: linear-gradient(92deg, #fff, #c4b5fd 55%, #67e8f9);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.news-tag {
  font-size: 10px; font-weight: 800; letter-spacing: 1px;
  padding: 2px 9px; border-radius: 99px;
  background: rgba(255,255,255,.08); color: var(--dim);
  border: 1px solid var(--line);
}
.news-card.current .news-tag { background: rgba(74,222,128,.16); color: #86efac; border-color: rgba(74,222,128,.4); }
.news-name { font-size: 13px; color: #c4b5fd; font-weight: 700; letter-spacing: .5px; }
.news-date { margin-left: auto; font-size: 11px; color: var(--dim2); }
.news-summary { font-size: 12.5px; color: var(--dim); line-height: 1.75; margin-bottom: 14px; }

.news-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.news-group { border-radius: 12px; border: 1px solid var(--line); background: rgba(0,0,0,.16); padding: 12px 14px; }
.news-group h4 {
  margin: 0 0 8px; font-size: 11.5px; letter-spacing: 1.4px;
  color: var(--accent2); font-weight: 700;
}
.news-group ul { margin: 0; padding: 0; list-style: none; }
.news-group li {
  position: relative;
  font-size: 12px; line-height: 1.7; color: #aab4cc;
  padding-left: 15px; margin-bottom: 5px;
}
.news-group li::before {
  content: ""; position: absolute; left: 4px; top: 8px;
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(124, 92, 255, .9);
}

/* ============================================================
 *  主题：简约科幻（默认） / 黑白线稿 / 米色便签
 *  只切换 CSS 变量与少量覆盖规则，不动 DOM，切换零重排成本
 * ============================================================ */

/* ---------- 黑白线稿：白纸 + 黑描边 + 灰格子 ---------- */
:root[data-theme="ink"] {
  --bg: #f4f4f4;
  --panel: rgba(255, 255, 255, .92);
  --panel-solid: #ffffff;
  --line: rgba(0, 0, 0, .18);
  --line-strong: rgba(0, 0, 0, .45);
  --text: #111111;
  --dim: #555555;
  --dim2: #8c8c8c;
  --accent: #111111;
  --accent2: #333333;
  --accent3: #666666;
  --ok: #1a7f37;
  --bad: #b32020;
  --radius: 6px;
  --font: "Songti SC", "STSong", "SimSun", "宋体", "Noto Serif SC", serif;
}
:root[data-theme="ink"] body::before {
  inset: 0;
  background-color: #f4f4f4;
  background-image:
    linear-gradient(rgba(0, 0, 0, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, .07) 1px, transparent 1px);
  background-size: 28px 28px, 28px 28px;
  filter: none;
  animation: none;
}
:root[data-theme="ink"] body::after { display: none; }
/* 去掉一切渐变与发光，改成描边 */
:root[data-theme="ink"] .panel,
:root[data-theme="ink"] .topbar,
:root[data-theme="ink"] .modal-panel,
:root[data-theme="ink"] .tile,
:root[data-theme="ink"] .wcard,
:root[data-theme="ink"] .chip,
:root[data-theme="ink"] .dlc-card,
:root[data-theme="ink"] .dlc-el,
:root[data-theme="ink"] .ach-card,
:root[data-theme="ink"] .news-card,
:root[data-theme="ink"] .news-group,
:root[data-theme="ink"] .toast,
:root[data-theme="ink"] .banner-inner {
  background: #fff !important;
  box-shadow: none !important;
  border-color: #111 !important;
}
:root[data-theme="ink"] .topbar { border-bottom: 2px solid #111; }
:root[data-theme="ink"] .panel { border-width: 2px; }
:root[data-theme="ink"] .tile,
:root[data-theme="ink"] .wcard,
:root[data-theme="ink"] .chip { border-width: 2px; }
:root[data-theme="ink"] .tile.locked { background: #fff !important; border-color: #d0d0d0 !important; }
/* 稀有度着色在线稿主题里必须让位给黑描边 */
:root[data-theme="ink"] .tile.r1, :root[data-theme="ink"] .tile.r2, :root[data-theme="ink"] .tile.r3,
:root[data-theme="ink"] .tile.r4, :root[data-theme="ink"] .tile.r5, :root[data-theme="ink"] .tile.r6,
:root[data-theme="ink"] .wcard.r1, :root[data-theme="ink"] .wcard.r2, :root[data-theme="ink"] .wcard.r3,
:root[data-theme="ink"] .wcard.r4, :root[data-theme="ink"] .wcard.r5, :root[data-theme="ink"] .wcard.r6,
:root[data-theme="ink"] .chip.r1, :root[data-theme="ink"] .chip.r2, :root[data-theme="ink"] .chip.r3,
:root[data-theme="ink"] .chip.r4, :root[data-theme="ink"] .chip.r5, :root[data-theme="ink"] .chip.r6 {
  background: #fff !important;
  border-color: #111 !important;
  box-shadow: none !important;
}
:root[data-theme="ink"] .tile.locked .tile-emoji { color: #c4c4c4; }
:root[data-theme="ink"] .chip { border-color: #111 !important; }
:root[data-theme="ink"] .brand-orb,
:root[data-theme="ink"] .dlc-orb,
:root[data-theme="ink"] .detail-orb { background: #fff !important; box-shadow: none !important; border: 2px solid #111 !important; }
:root[data-theme="ink"] .brand-text h1,
:root[data-theme="ink"] .banner-name,
:root[data-theme="ink"] .news-ver {
  background: none !important; -webkit-text-fill-color: #111; color: #111 !important;
}
:root[data-theme="ink"] .progress-bar { background: #e6e6e6; border: 1px solid #111; }
:root[data-theme="ink"] .progress-bar i { background: #111; box-shadow: none; }
:root[data-theme="ink"] .btn,
:root[data-theme="ink"] .btn.primary {
  background: #fff; color: #111; border: 1px solid #111; box-shadow: none;
}
:root[data-theme="ink"] .btn:hover,
:root[data-theme="ink"] .btn.primary:hover { background: #111; color: #fff; }
:root[data-theme="ink"] .navtabs button.active,
:root[data-theme="ink"] .lib-tabs button.active {
  background: #111; color: #fff; box-shadow: none; border-bottom-color: #111;
}
:root[data-theme="ink"] .navtabs button.active b { color: #fff; background: rgba(255,255,255,.2); }
:root[data-theme="ink"] .tile.is-new::before,
:root[data-theme="ink"] .wcard.is-new::before { background: #111; box-shadow: none; }
:root[data-theme="ink"] .ws-grid-bg { background-image: radial-gradient(rgba(0,0,0,.14) 1px, transparent 1px); }
:root[data-theme="ink"] .chip.dlc::after,
:root[data-theme="ink"] .tile.dlc::before { background: #111 !important; color: #fff; }
:root[data-theme="ink"] .toast.ach { border-color: #111 !important; }
:root[data-theme="ink"] .toast.ach .toast-title { color: #111; }

/* ---------- 米色便签：米底 + 蓝行线 + 红细框 ---------- */
:root[data-theme="note"] {
  --bg: #f8f1de;
  --panel: rgba(253, 249, 236, .94);
  --panel-solid: #fdf9ec;
  --line: rgba(59, 110, 165, .28);
  --line-strong: #c0392b;
  --text: #33291c;
  --dim: #6d6350;
  --dim2: #9c937c;
  --accent: #3b6ea5;
  --accent2: #3b6ea5;
  --accent3: #c0392b;
  --ok: #2e7d4f;
  --bad: #c0392b;
  --radius: 4px;
  --font: "Kaiti SC", "STKaiti", "KaiTi", "楷体", "Noto Serif SC", serif;
}
:root[data-theme="note"] body::before {
  inset: 0;
  background-color: #f8f1de;
  background-image:
    linear-gradient(90deg, transparent 0 54px, rgba(192, 57, 43, .5) 54px 55px, transparent 55px),
    repeating-linear-gradient(to bottom, transparent 0 27px, rgba(59, 110, 165, .3) 27px 28px);
  background-size: auto, auto;
  filter: none;
  animation: none;
}
:root[data-theme="note"] body::after { display: none; }
:root[data-theme="note"] .panel,
:root[data-theme="note"] .topbar,
:root[data-theme="note"] .modal-panel {
  background: rgba(253, 249, 236, .94);
  border: 1px solid #c0392b;
  box-shadow: 2px 3px 0 rgba(192, 57, 43, .14);
}
:root[data-theme="note"] .tile,
:root[data-theme="note"] .wcard,
:root[data-theme="note"] .chip,
:root[data-theme="note"] .dlc-card,
:root[data-theme="note"] .ach-card,
:root[data-theme="note"] .news-card,
:root[data-theme="note"] .toast {
  background: #fffdf6;
  border: 1px solid rgba(192, 57, 43, .5);
  box-shadow: 1px 2px 0 rgba(192, 57, 43, .12) !important;
}
:root[data-theme="note"] .navtabs button.active,
:root[data-theme="note"] .lib-tabs button.active {
  background: #3b6ea5; color: #fff; box-shadow: none;
}
:root[data-theme="note"] .btn.primary { background: #3b6ea5; border-color: #3b6ea5; }
:root[data-theme="note"] .progress-bar i { background: linear-gradient(90deg, #3b6ea5, #c0392b); }
:root[data-theme="note"] .brand-orb { background: #fdf9ec; border-color: #c0392b; box-shadow: none; }
:root[data-theme="note"] .brand-text h1,
:root[data-theme="note"] .news-ver { background: none; -webkit-text-fill-color: #3b6ea5; color: #3b6ea5; }
:root[data-theme="note"] .banner-name { background: none; -webkit-text-fill-color: #c0392b; color: #c0392b; }
:root[data-theme="note"] .ws-grid-bg { background-image: radial-gradient(rgba(59,110,165,.22) 1px, transparent 1px); }

/* ---------- 主题页 ---------- */
.theme-grid {
  grid-column: 1 / -1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  align-content: start;
  scrollbar-width: thin;
  scrollbar-color: rgba(128,128,128,.3) transparent;
}
.theme-grid::-webkit-scrollbar { width: 9px; }
.theme-grid::-webkit-scrollbar-thumb { background: rgba(128,128,128,.3); border-radius: 9px; }

.theme-card {
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 16px 18px 18px;
  transition: border-color .2s, box-shadow .25s;
}
.theme-card.current { border-color: rgba(var(--tc, 124,92,255), .85); box-shadow: 0 0 40px -22px rgba(var(--tc, 124,92,255), 1); }
.theme-card.locked { opacity: .82; }
.theme-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.theme-orb {
  width: 52px; height: 52px; flex: none;
  display: grid; place-items: center; border-radius: 12px;
  font-size: 26px; font-family: var(--emoji-font);
  border: 1px solid var(--line-strong);
  background: linear-gradient(135deg, rgba(var(--tc), .3), rgba(255,255,255,.05));
}
.theme-meta { flex: 1; min-width: 0; }
.theme-meta h3 { margin: 0 0 3px; font-size: 16.5px; letter-spacing: 1px; }
.theme-meta p { margin: 0; font-size: 12px; color: var(--dim); line-height: 1.65; }
.theme-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.theme-tag {
  font-size: 10.5px; padding: 2px 8px; border-radius: 99px;
  border: 1px solid var(--line); color: var(--dim2);
}
.theme-swatch { display: flex; gap: 6px; margin-top: 12px; }
.theme-swatch i {
  width: 46px; height: 30px; border-radius: 6px;
  border: 1px solid var(--line); display: block;
}
.theme-action {
  appearance: none; cursor: pointer;
  margin-top: 14px; width: 100%;
  padding: 9px 14px; border-radius: 10px;
  font-size: 12.5px; font-weight: 700;
  border: 1px solid var(--line-strong);
  background: rgba(128,128,128,.1); color: var(--text);
  transition: all .16s;
}
.theme-action:hover { background: rgba(128,128,128,.22); }
.theme-action.primary { background: linear-gradient(135deg, rgba(124,92,255,.9), rgba(34,211,238,.7)); border-color: transparent; color: #fff; }
.theme-action:disabled { opacity: .6; cursor: default; }

/* ---------- 左上角「新元素」提示 ---------- */
#toasts-left {
  position: fixed; top: 74px; left: 14px;
  z-index: 960;
  display: flex; flex-direction: column; gap: 9px;
  pointer-events: none;
  max-width: 300px;
}
.toast.item {
  border-left: 3px solid rgb(var(--rc, 124, 92, 255));
  background: linear-gradient(140deg, rgba(26, 32, 54, .97), rgba(14, 18, 32, .97));
}
.toast.item .toast-icon { background: rgba(var(--rc, 124,92,255), .2); border-color: rgba(var(--rc, 124,92,255), .5); }
.toast.item .toast-title { color: rgb(var(--rc, 124, 92, 255)); }
.toast .stars { color: #fbbf24; letter-spacing: 2px; }
.toast .stars .off { color: #4a5270; }
:root[data-theme="ink"] #toasts-left .toast .stars { color: #111; }
:root[data-theme="ink"] #toasts-left .toast .stars .off { color: #ccc; }
:root[data-theme="note"] .toast.item .toast-title { color: #c0392b; }

/* ============================================================
 *  移动端 / 容器适配
 *  · 安全区（刘海屏）由 --sat/--sab/--sal/--sar 控制，
 *    默认取 env()，Toy 容器状态返回真实值时会覆盖
 *  · 竖屏：工作区在上、元素栏在下（34vh 抽屉）
 *  · 横屏：保持左右分栏，只是整体缩小
 * ============================================================ */
:root {
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}
html, body { overscroll-behavior: none; }
#app { padding: var(--sat) var(--sar) var(--sab) var(--sal); }
button, .tile, .chip, .wcard { touch-action: manipulation; }
button, .tile, .chip { -webkit-touch-callout: none; }

/* 元素块 / 卡片尺寸随视口高度缩放 */
.tile { height: clamp(48px, 7.2vh, 68px); }
.tile .tile-emoji { font-size: clamp(18px, 3.2vh, 25px); }
.tile .tile-name { font-size: clamp(8.5px, 1.25vh, 10px); }
.wcard { height: clamp(60px, 9vh, 84px); }
.wcard .wcard-emoji { font-size: clamp(20px, 3.4vh, 28px); }
.chip .chip-emoji { font-size: clamp(22px, 4.2vh, 33px); }
.chip .chip-name { font-size: clamp(9px, 1.4vh, 11px); }

/* ---------- 手机竖屏 ---------- */
@media (max-width: 860px) and (orientation: portrait) {
  .topbar { flex-wrap: wrap; gap: 8px; padding: 8px 10px; }
  .brand { gap: 8px; }
  .brand-orb { width: 34px; height: 34px; font-size: 18px; border-radius: 10px; }
  .brand-text h1 { font-size: 15px; letter-spacing: 1px; }
  .brand-text p { display: none; }
  .ver-badge { font-size: 9.5px; padding: 1px 6px; vertical-align: 2px; }
  .progress-wrap { order: 3; flex-basis: 100%; max-width: none; }
  .progress-label { font-size: 10.5px; margin-bottom: 4px; }
  .actions { margin-left: auto; }
  .actions .btn { padding: 8px 10px; font-size: 12px; }
  .actions .btn span:not(#sound-icon) { display: none; }

  .navtabs { justify-content: safe center; padding: 6px 4px 0; gap: 2px; }
  .navtabs button { padding: 8px 7px; font-size: 11.5px; gap: 4px; border-radius: 8px 8px 0 0; flex: none; }
  .navtabs button b { display: none; }

  /* 工作区在上、元素栏在下的抽屉式布局 */
  .stage {
    padding: 8px; gap: 8px;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) minmax(150px, 38vh);
    width: 100%; max-width: 100vw;
  }
  .panel { min-width: 0; max-width: 100%; }
  .panel-head { padding: 8px 11px; }
  .panel-title { font-size: 12.5px; }
  .btn.tiny { padding: 6px 11px; font-size: 11.5px; }
  .lib-search { padding: 8px 11px; font-size: 13px; }
  .lib-tabs { padding: 7px 11px; }
  .lib-tabs button { padding: 7px 4px; font-size: 11.5px; }
  .lib-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    width: 100% !important; max-width: 100% !important;
    gap: 6px; padding: 4px 11px 12px;
  }

  .ws-empty-orb { font-size: 40px; }
  .ws-empty .line1 { font-size: 13.5px; }
  .ws-empty .line2 { display: none; }

  .page-panel { margin: 8px; }
  .page-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .page-body.ach-body { grid-template-columns: minmax(0, 1fr); }
  .wiki-detail { border-left: none; border-top: 1px solid var(--line); max-height: 36vh; padding: 12px 14px; }
  .detail-orb { width: 56px; height: 56px; font-size: 28px; }
  .wiki-tools .lib-search { width: 108px; }
  .wiki-grid { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 7px; padding: 10px; }
  .ach-list { grid-template-columns: 1fr; padding: 10px; gap: 8px; }
  .dlc-grid, .theme-grid { grid-template-columns: 1fr; padding: 10px; gap: 10px; }
  .news-list { padding: 12px 14px 22px; }
  .news-groups { grid-template-columns: 1fr; }

  /* 竖屏：所有提示统一在左上角，铺满可用宽度 */
  #toasts-left {
    top: calc(104px + var(--sat)); left: calc(8px + var(--sal));
    right: calc(8px + var(--sar)); width: auto; max-width: none;
  }
  .toast { padding: 8px 10px; gap: 8px; max-width: 100%; }
  .toast-icon { width: 32px; height: 32px; font-size: 17px; border-radius: 9px; }
  .toast-title { font-size: 12px; overflow-wrap: anywhere; }
  .toast-sub { font-size: 10.5px; overflow-wrap: anywhere; }
  .hint-line { font-size: 11.5px; }

  /* 弹窗也统一靠左上，不再屏幕居中 */
  .dialog { place-items: start; padding: calc(72px + var(--sat)) 12px 12px calc(12px + var(--sal)); }
  .dialog-box {
    width: 100%; max-width: 360px;
    padding: 18px 18px 14px; text-align: left;
  }
  .dialog-icon { font-size: 30px; margin-bottom: 6px; }
  .dialog-box h3 { font-size: 16px; margin-bottom: 8px; }
  .dialog-box p { font-size: 12px; line-height: 1.75; margin-bottom: 12px; }
  .dialog-icon { display: none; }

  /* 三等分，避免筛选标签挤出面板 */
  #lib-tabs, #wiki-tabs, #ach-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px;
  }
  #lib-tabs button, #wiki-tabs button, #ach-tabs button {
    width: 100%; min-width: 0; padding: 7px 2px;
  }
  #lib-tabs, #wiki-tabs, #ach-tabs { width: 100% !important; max-width: 100% !important; }
  .wiki-grid { width: 100% !important; max-width: 100% !important; }
}

/* ---------- 手机横屏（矮屏） ---------- */
@media (orientation: landscape) and (max-height: 560px) {
  .topbar { gap: 10px; padding: 6px 10px; }
  .brand { gap: 8px; }
  .brand-orb { width: 30px; height: 30px; font-size: 16px; border-radius: 9px; }
  .brand-text h1 { font-size: 14px; letter-spacing: 1px; }
  .brand-text p { display: none; }
  .ver-badge { font-size: 9px; padding: 1px 5px; vertical-align: 2px; }
  .progress-label { font-size: 10px; margin-bottom: 3px; }
  .progress-bar { height: 6px; }
  .actions { gap: 6px; }
  .actions .btn { padding: 6px 9px; font-size: 11.5px; }
  .actions .btn span:not(#sound-icon) { display: none; }

  .navtabs { padding: 4px 10px 0; gap: 4px; }
  .navtabs button { padding: 5px 11px; font-size: 12px; }
  .navtabs button b { display: none; }

  .stage {
    padding: 6px; gap: 8px;
    grid-template-columns: minmax(0, 1fr) minmax(178px, 29%);
    grid-template-rows: none;
  }
  .panel-head { padding: 6px 10px; }
  .panel-title { font-size: 12px; }
  .chip-count, .lib-count { font-size: 10.5px; }
  .btn.tiny { padding: 4px 9px; font-size: 11px; }
  .lib-search-wrap { padding: 7px 9px 0; }
  .lib-search { padding: 6px 9px; font-size: 12px; }
  .lib-tabs { padding: 6px 9px; gap: 4px; }
  .lib-tabs button { padding: 5px 4px; font-size: 11px; }
  .lib-grid { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 5px; padding: 3px 9px 10px; }

  .ws-empty-orb { font-size: 34px; }
  .ws-empty .line1 { font-size: 12.5px; }
  .ws-empty .line2 { display: none; }
  .chip { border-radius: 16px; }

  .page-panel { margin: 6px; }
  .page-body { grid-template-columns: minmax(0, 1fr) minmax(190px, 27%); }
  .wiki-detail { padding: 12px; }
  .detail-orb { width: 52px; height: 52px; font-size: 26px; }
  .wiki-grid { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; padding: 10px; }
  .ach-list { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 8px; padding: 10px; }
  .dlc-grid, .theme-grid { grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); padding: 10px; gap: 10px; }
  .dlc-head { padding: 12px; gap: 10px; }
  .dlc-orb { width: 44px; height: 44px; font-size: 22px; }
  .dlc-elements { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); padding: 0 12px 12px; }
  .dlc-el { height: 54px; font-size: 19px; }
  .news-list { padding: 12px 14px 20px; }
  .news-card { padding: 14px 16px 16px; }

  #toasts-left { top: calc(56px + var(--sat)); left: calc(8px + var(--sal)); width: 292px; max-width: 292px; }
  .toast { padding: 7px 9px; gap: 8px; max-width: 100%; }
  .toast-icon { width: 30px; height: 30px; font-size: 16px; border-radius: 8px; }
  .toast-title { font-size: 11.5px; overflow-wrap: anywhere; }
  .toast-sub { font-size: 10px; overflow-wrap: anywhere; }
}

/* 减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* ============================================================
 *  v1.0.1 统一提示栈 / 账号信息 / 排行榜 / 弹窗
 * ============================================================ */

/* ---------- 左上角统一提示卡片 ---------- */
#toasts-left {
  position: fixed;
  top: calc(74px + var(--sat));
  left: calc(14px + var(--sal));
  z-index: 960;
  display: flex; flex-direction: column; gap: 9px;
  pointer-events: none;
  width: 336px; max-width: calc(100vw - 28px);
}
.toast {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 13px;
  border-radius: 14px;
  background: linear-gradient(140deg, rgba(26, 32, 54, .97), rgba(14, 18, 32, .97));
  border: 1px solid var(--line-strong);
  box-shadow: 0 22px 50px -26px #000;
  animation: toastIn .4s cubic-bezier(.16, 1.2, .3, 1) both;
}
.toast.out { animation: toastOut .34s ease-in both; }
@keyframes toastIn { from { opacity: 0; transform: translateX(-56px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(-46px) scale(.94); } }

.toast.item { border-left: 3px solid rgb(var(--rc, 124, 92, 255)); pointer-events: auto; cursor: pointer; }
.toast.ach  { --rc: 251, 191, 36; }
.toast.hint { --rc: 34, 211, 238; }
.toast.good { --rc: 74, 222, 128; }

.toast-icon {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center; border-radius: 11px;
  font-size: 20px; font-family: var(--emoji-font);
  background: rgba(var(--rc, 124, 92, 255), .18);
  border: 1px solid rgba(var(--rc, 124, 92, 255), .45);
}
.toast-body { min-width: 0; flex: 1; }
.toast-title {
  font-size: 13px; font-weight: 700; letter-spacing: .3px; margin-bottom: 2px;
  color: rgb(var(--rc, 124, 92, 255)); overflow-wrap: anywhere;
}
.toast-sub { font-size: 11.5px; color: var(--dim); line-height: 1.6; overflow-wrap: anywhere; }
.toast .stars { color: #fbbf24; letter-spacing: 2px; font-weight: 400; }
.toast .stars .off { color: #4a5270; }

.hint-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--text); margin-top: 3px; }
.hint-line .hl-el {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px; border-radius: 7px;
  background: rgba(255, 255, 255, .08); border: 1px solid var(--line);
  font-family: var(--emoji-font);
}
.hint-line .hl-el i { font-style: normal; font-family: var(--font); font-size: 11.5px; }
.hint-line b { color: var(--dim2); font-weight: 700; }
.hint-line .hl-q { font-family: var(--emoji-font); font-size: 14px; }

/* ---------- 账号信息 ---------- */
.account-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px 5px 5px; border-radius: 99px;
  border: 1px solid var(--line-strong);
  background: rgba(128, 128, 128, .1);
  color: var(--text); font-size: 12px; font-weight: 600;
  cursor: pointer; max-width: 170px;
  transition: background .18s, border-color .18s;
}
.account-chip:hover { background: rgba(128, 128, 128, .2); }
.account-chip img {
  width: 26px; height: 26px; border-radius: 50%;
  object-fit: cover; flex: none; background: rgba(128,128,128,.25);
}
.account-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-chip[hidden] { display: none; }

/* ---------- 排行榜 ---------- */
.rank-list {
  min-height: 0; overflow-y: auto;
  padding: 14px 18px;
  scrollbar-width: thin; scrollbar-color: rgba(128,128,128,.3) transparent;
}
.rank-list::-webkit-scrollbar { width: 9px; }
.rank-list::-webkit-scrollbar-thumb { background: rgba(128,128,128,.3); border-radius: 9px; }

.rank-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; margin-bottom: 7px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(128, 128, 128, .06);
}
.rank-row.me { border-color: rgba(124, 92, 255, .8); background: rgba(124, 92, 255, .14); }
.rank-row.top1 { border-color: rgba(251, 191, 36, .7); background: linear-gradient(90deg, rgba(251,191,36,.18), rgba(128,128,128,.05)); }
.rank-row.top2 { border-color: rgba(203, 213, 225, .6); }
.rank-row.top3 { border-color: rgba(217, 119, 6, .55); }
.rank-no { width: 34px; flex: none; text-align: center; font-weight: 800; font-size: 14px; color: var(--dim); }
.rank-row.top1 .rank-no { color: #fbbf24; }
.rank-row.top2 .rank-no { color: #cbd5e1; }
.rank-row.top3 .rank-no { color: #d97706; }
.rank-row img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; background: rgba(128,128,128,.2); }
.rank-name { flex: 1; min-width: 0; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-score { flex: none; font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rank-score small { font-size: 10px; color: var(--dim2); font-weight: 500; margin-left: 3px; }
.rank-empty { text-align: center; color: var(--dim2); font-size: 12.5px; padding: 40px 12px; line-height: 1.9; }

.rank-side {
  min-height: 0; overflow-y: auto;
  padding: 18px;
  border-left: 1px solid var(--line);
  background: rgba(0, 0, 0, .12);
}
.rank-side .btn { width: 100%; justify-content: center; margin-top: 10px; }
.rank-me {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(128, 128, 128, .07);
  margin-bottom: 12px;
}
.rank-me img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; background: rgba(128,128,128,.2); }
.rank-me h3 { margin: 0 0 3px; font-size: 15px; }
.rank-me p { margin: 0; font-size: 11.5px; color: var(--dim); }

/* ---------- 弹窗 ---------- */
.dialog { position: fixed; inset: 0; z-index: 980; display: grid; place-items: center; }
.dialog[hidden] { display: none; }
.dialog-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .66);
  backdrop-filter: blur(6px);
  animation: fadeIn .2s ease both;
}
.dialog-box {
  position: relative;
  width: min(400px, calc(100vw - 40px));
  padding: 26px 26px 22px;
  border-radius: 18px;
  text-align: center;
  background: linear-gradient(180deg, rgba(26, 31, 52, .98), rgba(14, 18, 32, .98));
  border: 1px solid var(--line-strong);
  box-shadow: 0 40px 90px -40px #000, inset 0 1px 0 rgba(255,255,255,.07);
  animation: modalIn .28s cubic-bezier(.16, 1.1, .3, 1) both;
}
.dialog-icon { font-size: 40px; line-height: 1; margin-bottom: 10px; font-family: var(--emoji-font); }
.dialog-box h3 { margin: 0 0 10px; font-size: 18px; letter-spacing: 1px; }
.dialog-box p { margin: 0 0 16px; font-size: 12.5px; line-height: 1.85; color: var(--dim); }
.dialog-box p b { color: var(--text); }
.dialog-box .lib-search { text-align: center; letter-spacing: 2px; margin-bottom: 8px; }
.dialog-msg { min-height: 18px; font-size: 11.5px; margin-bottom: 10px; color: var(--dim2); }
.dialog-msg.ok { color: #86efac; }
.dialog-msg.bad { color: #fda4af; }
.dialog-actions { display: flex; gap: 10px; }
.dialog-actions .btn { flex: 1; justify-content: center; padding: 11px 12px; }

/* 线稿 / 便签主题下的提示卡片 */
:root[data-theme="ink"] .toast { background: #fff !important; border-color: #111 !important; box-shadow: none !important; }
:root[data-theme="ink"] .toast .stars { color: #111; }
:root[data-theme="ink"] .toast .stars .off { color: #ccc; }
:root[data-theme="ink"] .hint-line .hl-el { background: #fff; border-color: #111; }
:root[data-theme="note"] .toast-title { color: #c0392b; }
:root[data-theme="note"] .dialog-box { background: #fdf9ec; border-color: #c0392b; }

/* ---------- 手机竖屏：提示与弹窗统一靠左上 ---------- */
@media (max-width: 860px) and (orientation: portrait) {
  #toasts-left {
    top: calc(104px + var(--sat));
    left: calc(8px + var(--sal));
    right: calc(8px + var(--sar));
    width: auto; max-width: none;
  }
  .toast { padding: 8px 10px; gap: 8px; }
  .toast-icon { width: 32px; height: 32px; font-size: 17px; border-radius: 9px; }
  .toast-title { font-size: 12px; }
  .toast-sub { font-size: 10.5px; }
  .hint-line { font-size: 11.5px; }

  .dialog { place-items: start; padding: calc(72px + var(--sat)) 12px 12px calc(12px + var(--sal)); }
  .dialog-box { width: 100%; max-width: 360px; padding: 18px; text-align: left; }
  .dialog-icon { display: none; }
  .dialog-box h3 { font-size: 16px; margin-bottom: 8px; }
  .dialog-box p { font-size: 12px; line-height: 1.75; margin-bottom: 12px; }
  .dialog-actions .btn { padding: 10px; }

  .account-chip { max-width: 108px; padding: 4px 8px 4px 4px; font-size: 11px; }
  .account-chip img { width: 22px; height: 22px; }

  .rank-list { padding: 10px; }
  .rank-row { padding: 8px 10px; gap: 9px; }
  .rank-row img, .rank-no { width: 28px; }
  .rank-side { border-left: none; border-top: 1px solid var(--line); max-height: 32vh; padding: 12px; }
  .rank-tabs button { font-size: 11px; padding: 6px 2px; }
}

/* ---------- 手机横屏 ---------- */
@media (orientation: landscape) and (max-height: 560px) {
  #toasts-left { top: calc(56px + var(--sat)); left: calc(8px + var(--sal)); width: 296px; max-width: 296px; }
  .toast { padding: 8px 10px; gap: 8px; }
  .toast-icon { width: 30px; height: 30px; font-size: 16px; border-radius: 8px; }
  .toast-title { font-size: 11.5px; }
  .toast-sub { font-size: 10px; }
  .account-chip { max-width: 118px; padding: 3px 8px 3px 3px; font-size: 11px; }
  .account-chip img { width: 22px; height: 22px; }
  .rank-list { padding: 10px; }
  .rank-row { padding: 7px 10px; gap: 9px; }
  .rank-row img, .rank-no { width: 28px; }
  .rank-side { padding: 12px; }
  .dialog-box { padding: 20px; }
}


/* ============================================================
 *  基础布局（恢复）：标签栏 / 视图容器 / 页面面板 / DLC
 * ============================================================ */

/* ---------- 标签栏（居中） ---------- */
.navtabs {
  flex: none;
  display: flex; gap: 6px;
  justify-content: center;
  padding: 9px 14px 0;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.navtabs::-webkit-scrollbar { display: none; }
.navtabs button {
  appearance: none; cursor: pointer;
  padding: 9px 20px;
  border: none; border-bottom: 2px solid transparent;
  border-radius: 10px 10px 0 0;
  background: transparent;
  color: var(--dim);
  font-size: 13.5px; font-weight: 700; letter-spacing: .5px;
  display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap;
  transition: color .16s, background .16s, border-color .16s;
}
.navtabs button b {
  font-size: 11px; font-weight: 700; color: var(--dim2);
  background: rgba(255,255,255,.07); padding: 1px 7px; border-radius: 99px;
  font-variant-numeric: tabular-nums;
}
.navtabs button:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.navtabs button.active { color: #fff; border-bottom-color: var(--accent2); background: rgba(124, 92, 255, .16); }
.navtabs button.active b { color: #fbbf24; background: rgba(251,191,36,.16); }

/* ---------- 视图容器 ---------- */
.main { flex: 1; min-height: 0; min-width: 0; overflow: hidden; display: flex; }
.view { flex: 1; min-height: 0; min-width: 0; display: flex; }
.view[hidden] { display: none; }
.view > .stage { flex: 1; min-height: 0; min-width: 0; }

.page-panel { flex: 1; min-height: 0; margin: 14px; }
.page-body {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 342px;
}
.page-body.single { grid-template-columns: minmax(0, 1fr); }
.page-body.ach-body { grid-template-columns: minmax(0, 1fr); }

/* ---------- DLC ---------- */
.dlc-grid {
  grid-column: 1 / -1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 16px;
  align-content: start;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.16) transparent;
}
.dlc-grid::-webkit-scrollbar { width: 9px; }
.dlc-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 9px; }

.dlc-card {
  border-radius: 16px;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  overflow: hidden;
  transition: border-color .2s, box-shadow .25s;
}
.dlc-card.unlocked {
  border-color: rgba(var(--dc), .6);
  box-shadow: 0 0 40px -22px rgba(var(--dc), 1), inset 0 0 40px -30px rgba(var(--dc), 1);
}
.dlc-card.ready { border-color: rgba(74, 222, 128, .65); animation: readyPulse 2.2s ease-in-out infinite; }
@keyframes readyPulse {
  0%, 100% { box-shadow: 0 0 26px -18px rgba(74,222,128,1); }
  50% { box-shadow: 0 0 44px -14px rgba(74,222,128,1); }
}
.dlc-head { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.dlc-orb {
  width: 58px; height: 58px; flex: none;
  display: grid; place-items: center; border-radius: 16px;
  font-size: 29px; font-family: var(--emoji-font);
  background: linear-gradient(150deg, rgba(var(--dc), .35), rgba(255,255,255,.05));
  border: 1px solid rgba(var(--dc), .5);
  filter: grayscale(.75) opacity(.75);
  transition: filter .3s;
}
.dlc-card.unlocked .dlc-orb, .dlc-card.ready .dlc-orb { filter: none; }
.dlc-meta { flex: 1; min-width: 0; }
.dlc-meta h3 { margin: 0 0 3px; font-size: 17px; letter-spacing: 1px; }
.dlc-meta h3 small { font-size: 11.5px; color: var(--dim2); font-weight: 400; margin-left: 7px; letter-spacing: 0; }
.dlc-meta p { margin: 0; font-size: 12px; color: var(--dim); line-height: 1.6; }
.dlc-req { font-size: 11.5px; color: var(--dim2); margin-top: 5px; font-variant-numeric: tabular-nums; }
.dlc-card.unlocked .dlc-req { color: #86efac; }

.dlc-action {
  flex: none;
  appearance: none; cursor: pointer;
  padding: 9px 16px; border-radius: 11px;
  font-size: 12.5px; font-weight: 700;
  border: 1px solid var(--line-strong); background: rgba(255,255,255,.05); color: var(--dim);
  white-space: nowrap;
  transition: all .18s;
}
.dlc-card.ready .dlc-action {
  background: linear-gradient(135deg, rgba(74,222,128,.95), rgba(34,211,238,.8));
  border-color: transparent; color: #06210f;
  box-shadow: 0 8px 24px -10px rgba(74,222,128,1);
}
.dlc-card.ready .dlc-action:hover { transform: translateY(-1px) scale(1.03); }
.dlc-card.unlocked .dlc-action { color: #86efac; border-color: rgba(74,222,128,.4); background: rgba(74,222,128,.1); cursor: default; }

.dlc-elements {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: 8px;
  padding: 0 18px 18px;
  align-items: start;
}
.dlc-el {
  position: relative;
  height: 68px;
  border-radius: 13px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 1px solid rgba(var(--dc), .3);
  background: linear-gradient(160deg, rgba(var(--dc), .14), rgba(255,255,255,.02));
  font-size: 24px; font-family: var(--emoji-font);
}
.dlc-el span {
  font-size: 9.5px; color: var(--dim); font-family: var(--font);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 3px;
}
.dlc-el.locked { border-color: rgba(255,255,255,.05); background: rgba(255,255,255,.02); color: #2e3550; font-size: 16px; font-weight: 900; font-family: var(--font); }
.dlc-el.locked span { color: #2a3048; }
.dlc-el.gift { box-shadow: 0 0 0 1px rgba(var(--dc), .5), 0 0 18px -8px rgba(var(--dc), 1); }
.dlc-el.gift::after {
  content: "赠送"; position: absolute; transform: translate(26px, -30px);
  font-size: 8px; font-family: var(--font); padding: 1px 5px; border-radius: 99px;
  background: rgba(74,222,128,.9); color: #06210f; font-weight: 700;
}


/* ============================================================
 *  v1.0.2 竖屏重制 / 翻页标签栏 / 侧拉面板
 * ============================================================ */

/* ---------- 右上角计数徽章 ---------- */
.count-badge {
  flex: none;
  font-size: 11.5px; font-weight: 700;
  padding: 5px 11px; border-radius: 99px;
  background: rgba(124, 92, 255, .18);
  border: 1px solid rgba(124, 92, 255, .45);
  color: #c4b5fd;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
:root[data-theme="ink"] .count-badge { background: #fff; border-color: #111; color: #111; }
:root[data-theme="note"] .count-badge { background: #fffdf6; border-color: #c0392b; color: #c0392b; }

.page-panel { position: relative; }

/* ---------- 侧拉抽屉 ---------- */
.drawer {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 352px; max-width: 92vw;
  z-index: 30;
  display: flex; flex-direction: column;
  background: var(--panel-solid);
  border-left: 1px solid var(--line-strong);
  box-shadow: -24px 0 60px -30px rgba(0, 0, 0, .9);
  transform: translateX(101%);
  transition: transform .28s cubic-bezier(.22, .9, .3, 1);
  will-change: transform;
}
.drawer.open { transform: none; }
.drawer-head {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.drawer-title { font-size: 13px; font-weight: 700; color: var(--dim); letter-spacing: 1px; }
.drawer-close {
  appearance: none; cursor: pointer;
  padding: 6px 14px; border-radius: 9px;
  font-size: 12px; font-weight: 700;
  border: 1px solid var(--line-strong);
  background: rgba(128, 128, 128, .12);
  color: var(--text);
  transition: background .16s;
}
.drawer-close:hover { background: rgba(128, 128, 128, .26); }
.drawer-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; }
.drawer-scroll::-webkit-scrollbar { width: 8px; }
.drawer-scroll::-webkit-scrollbar-thumb { background: rgba(128,128,128,.3); border-radius: 8px; }

/* 侧拉把手 */
.drawer-handle {
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  z-index: 25;
  appearance: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 12px 7px;
  border: 1px solid rgba(124, 92, 255, .5);
  border-right: none;
  border-radius: 12px 0 0 12px;
  background: linear-gradient(135deg, rgba(124, 92, 255, .9), rgba(34, 211, 238, .7));
  color: #fff;
  font-size: 17px;
  box-shadow: -8px 0 24px -12px rgba(124, 92, 255, 1);
  transition: padding .16s, opacity .2s;
}
.drawer-handle i {
  font-style: normal; font-size: 9.5px; letter-spacing: 1px;
  writing-mode: vertical-rl;
}
.drawer-handle:hover { padding-right: 11px; }
.drawer-handle[hidden] { display: none; }
.drawer.open ~ .drawer-handle, .drawer-handle.hide { opacity: 0; pointer-events: none; }
:root[data-theme="ink"] .drawer-handle { background: #111; color: #fff; border-color: #111; }
:root[data-theme="note"] .drawer-handle { background: #3b6ea5; border-color: #c0392b; }

/* ---------- 翻页式标签栏（竖屏） ---------- */
.navpager {
  display: none;
  flex: none;
  align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px calc(10px + var(--sal)) 8px calc(10px + var(--sal));
  border-bottom: 1px solid var(--line);
}
.navpager button {
  appearance: none; cursor: pointer;
  width: 44px; height: 38px; flex: none;
  display: grid; place-items: center;
  font-size: 22px; line-height: 1;
  border-radius: 11px;
  border: 1px solid var(--line-strong);
  background: rgba(128, 128, 128, .12);
  color: var(--text);
  transition: background .16s, transform .12s;
}
.navpager button:hover { background: rgba(128, 128, 128, .26); }
.navpager button:active { transform: scale(.94); }
.navpager-label {
  flex: 1; text-align: center;
  font-size: 15px; font-weight: 800; letter-spacing: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text);
}

/* ---------- 危险按钮 ---------- */
.btn.danger {
  background: linear-gradient(135deg, rgba(251, 113, 133, .95), rgba(239, 68, 68, .9));
  border-color: transparent; color: #fff;
  box-shadow: 0 8px 24px -12px rgba(239, 68, 68, 1);
}
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }

/* ---------- 筛选按钮自适应 ---------- */
.lib-tabs { flex-wrap: wrap; }
.lib-tabs button { flex: 1 1 auto; min-width: 62px; }

/* ---------- 元素网格自适应 ---------- */
.wiki-grid { grid-template-columns: repeat(auto-fill, minmax(min(84px, 17%), 1fr)); }
.wcard { height: clamp(58px, 9vh, 84px); }
.dlc-grid { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.dlc-elements { grid-template-columns: repeat(auto-fill, minmax(min(72px, 23%), 1fr)); }

/* ---------- 列表铺满 ---------- */
.rank-list, .wiki-grid, .ach-list, .dlc-grid, .theme-grid, .news-list { grid-column: 1 / -1; }

/* ---------- 手机竖屏：头栏居中 ---------- */
@media (max-width: 860px) and (orientation: portrait) {
  .navtabs { display: none; }
  .navpager { display: flex; }

  /* 提示栈下移到「品牌 + 按钮 + 进度 + 翻页标签」之下，由 JS 量出真实高度 */
  #toasts-left { top: calc(var(--sat) + var(--toast-top, 152px)); }

  .topbar {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 10px 10px 8px;
  }
  .brand { flex: 1 1 100%; justify-content: center; }
  .brand-text { text-align: center; }
  .brand-orb { width: 30px; height: 30px; font-size: 16px; }
  .brand-text h1 { font-size: 15px; }

  .actions {
    flex: 1 1 100%;
    display: flex; flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0;
  }
  .actions .btn,
  .actions .account-chip { flex: 0 1 auto; }
  .actions .btn { padding: 8px 12px; font-size: 12px; }
  .actions .btn span:not(#sound-icon) { display: inline; }
  .account-chip { max-width: none; }

  .progress-wrap { order: 0; flex: 1 1 100%; max-width: none; }
  .progress-label { justify-content: center; gap: 8px; }
  .progress-bar { height: 7px; }

  .panel { min-width: 0; max-width: 100%; }
  .page-panel { margin: 8px; }
  .count-badge { font-size: 11px; padding: 4px 9px; }

  .drawer { width: 100%; max-width: none; }
  .drawer-handle { padding: 10px 6px; font-size: 16px; }
  .drawer-scroll { padding: 12px; }

  .dlc-grid { grid-template-columns: 1fr; padding: 12px; gap: 12px; }
  .dlc-head { flex-wrap: wrap; padding: 13px 14px; gap: 11px; }
  .dlc-orb { width: 46px; height: 46px; font-size: 23px; border-radius: 13px; }
  .dlc-meta { flex: 1 1 0; min-width: 0; }
  .dlc-meta h3 { font-size: 15px; }
  .dlc-elements { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); padding: 0 14px 14px; gap: 7px; }
  .dlc-el { height: 58px; font-size: 20px; }
  .dlc-action { flex: 1 1 100%; width: auto; margin-top: 2px; padding: 10px; }

  .rank-list { padding: 10px; }
  .rank-row { padding: 9px 11px; gap: 9px; }
  .rank-row img, .rank-no { width: 30px; }
  .rank-score { font-size: 12.5px; }

  .lib-tabs button { min-width: 54px; font-size: 11.5px; padding: 7px 6px; }
  .wiki-tools .lib-search { width: 100%; }
}


/* ============================================================
 *  v1.0.3 扩展包 / 主题 侧拉栏 · 成就稀有边框 · 常见问题
 * ============================================================ */

/* ---------- 选择卡片（扩展包 / 主题共用） ---------- */
.pick-grid {
  grid-column: 1 / -1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 16px;
  align-content: start;
  scrollbar-width: thin;
  scrollbar-color: rgba(128,128,128,.3) transparent;
}
.pick-grid::-webkit-scrollbar { width: 9px; }
.pick-grid::-webkit-scrollbar-thumb { background: rgba(128,128,128,.3); border-radius: 9px; }

.pick-card {
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  cursor: pointer;
  transition: border-color .2s, transform .18s, box-shadow .25s;
  overflow: hidden;
}
.pick-card::before {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 82% 12%, rgba(var(--pc, 124,92,255), .22), transparent 60%);
  pointer-events: none;
}
.pick-card:hover { transform: translateY(-2px); border-color: rgba(var(--pc, 124,92,255), .55); }
.pick-card.active { border-color: rgba(var(--pc, 124,92,255), .9); box-shadow: 0 0 0 1px rgba(var(--pc,124,92,255),.5), 0 18px 40px -22px rgba(var(--pc,124,92,255),1); }
.pick-card.locked { opacity: .82; }
.pick-card.unlocked { border-color: rgba(var(--pc, 124,92,255), .5); }
.pick-card.ready { border-color: rgba(74,222,128,.7); animation: readyPulse 2.2s ease-in-out infinite; }
.pick-card.current { box-shadow: 0 0 0 2px rgba(var(--pc,124,92,255),.85); }

.pick-top { display: flex; align-items: center; gap: 13px; position: relative; }
.pick-orb {
  width: 54px; height: 54px; flex: none;
  display: grid; place-items: center;
  border-radius: 15px;
  font-size: 27px; font-family: var(--emoji-font);
  background: linear-gradient(150deg, rgba(var(--pc,124,92,255), .34), rgba(255,255,255,.05));
  border: 1px solid rgba(var(--pc,124,92,255), .5);
}
.pick-card.locked .pick-orb { filter: grayscale(.7) opacity(.75); }
.pick-meta { flex: 1; min-width: 0; }
.pick-meta h3 { margin: 0 0 3px; font-size: 16.5px; letter-spacing: .5px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.pick-meta h3 small { font-size: 11px; color: var(--dim2); font-weight: 400; letter-spacing: 0; }
.pick-meta p { margin: 0; font-size: 12px; line-height: 1.6; color: var(--dim); }

.pick-state {
  display: inline-flex; align-items: center; gap: 5px;
  align-self: flex-start;
  font-size: 11.5px; font-weight: 700;
  padding: 4px 11px; border-radius: 99px;
  border: 1px solid var(--line-strong);
  background: rgba(128,128,128,.12); color: var(--dim);
}
.pick-state.ok { color: #86efac; border-color: rgba(74,222,128,.45); background: rgba(74,222,128,.12); }
.pick-state.can { color: #06210f; border-color: transparent; background: linear-gradient(135deg, #4ade80, #22d3ee); }
.pick-state.no { color: var(--dim2); }
.pick-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; position: relative; }
.pick-count { font-size: 11.5px; color: var(--dim2); font-variant-numeric: tabular-nums; }

/* 主题色卡 */
.theme-swatch { display: flex; gap: 6px; }
.theme-swatch i { width: 20px; height: 20px; border-radius: 6px; border: 1px solid rgba(255,255,255,.22); }

/* ---------- 抽屉里的详情 ---------- */
.detail-hero { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.detail-hero .pick-orb { width: 62px; height: 62px; font-size: 31px; }
.detail-hero h3 { margin: 0 0 4px; font-size: 18px; }
.detail-hero p { margin: 0; font-size: 12.5px; color: var(--dim); line-height: 1.7; }
.detail-section-title {
  font-size: 11.5px; font-weight: 800; letter-spacing: 2px;
  color: var(--dim2); margin: 18px 0 9px;
}
.detail-note {
  padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(128,128,128,.07);
  font-size: 12.5px; line-height: 1.75; color: var(--dim);
}
.detail-note.ok { border-color: rgba(74,222,128,.5); background: rgba(74,222,128,.1); color: #86efac; }
.detail-note.warn { border-color: rgba(251,191,36,.5); background: rgba(251,191,36,.1); color: #fcd34d; }
.detail-el-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
}
.detail-el {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  height: 72px; border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(128,128,128,.07);
  font-size: 22px; font-family: var(--emoji-font);
}
.detail-el span { font-size: 9.5px; color: var(--dim); font-family: var(--font); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 3px; }
.detail-el.locked { color: var(--dim2); font-size: 15px; font-family: var(--font); font-weight: 800; }
.detail-el.gift { box-shadow: 0 0 0 1px rgba(74,222,128,.6); }
.detail-actions { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
.detail-actions .btn { width: 100%; justify-content: center; padding: 12px; }

/* ---------- 成就：完成 / 稀有 边框 ---------- */
.ach-card.done {
  border-color: rgba(251, 191, 36, .85);
  box-shadow: 0 0 0 1px rgba(251,191,36,.45), 0 0 26px -10px rgba(251,191,36,.95);
  background: linear-gradient(150deg, rgba(251,191,36,.12), rgba(255,255,255,.02));
}
.ach-card.done .ach-name { color: #fcd34d; }
.ach-card.rare {
  border-color: rgba(var(--arc, 168,85,247), .9);
  box-shadow: 0 0 0 1px rgba(var(--arc, 168,85,247), .5), 0 0 30px -8px rgba(var(--arc, 168,85,247), 1);
  background: linear-gradient(150deg, rgba(var(--arc, 168,85,247), .16), rgba(255,255,255,.02));
  animation: rareGlow 2.6s ease-in-out infinite;
}
.ach-card.rare .ach-name { color: rgb(var(--arc, 168,85,247)); }
.ach-card.done.rare {
  border-color: rgba(var(--arc, 168,85,247), .95);
  box-shadow: 0 0 0 1px rgba(var(--arc,168,85,247),.6), 0 0 34px -6px rgba(var(--arc,168,85,247),1);
}
@keyframes rareGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(var(--arc,168,85,247),.45), 0 0 22px -10px rgba(var(--arc,168,85,247),1); }
  50% { box-shadow: 0 0 0 1px rgba(var(--arc,168,85,247),.75), 0 0 38px -6px rgba(var(--arc,168,85,247),1); }
}
.ach-rate {
  flex: none; align-self: center;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 800;
  padding: 4px 10px; border-radius: 99px;
  border: 1px solid var(--line-strong);
  background: rgba(128,128,128,.12);
  color: var(--dim); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ach-rate.tiny { color: #f0abfc; border-color: rgba(240,171,252,.5); background: rgba(240,171,252,.12); }
.ach-rate.small { color: #a5b4fc; border-color: rgba(165,180,252,.45); background: rgba(165,180,252,.1); }
.ach-rate.mid { color: #7dd3fc; border-color: rgba(125,211,252,.4); background: rgba(125,211,252,.1); }
.ach-rate.big { color: #86efac; border-color: rgba(134,239,172,.4); background: rgba(134,239,172,.1); }

/* ---------- 常见问题 ---------- */
.faq-list {
  grid-column: 1 / -1;
  min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 20px 26px;
  scrollbar-width: thin; scrollbar-color: rgba(128,128,128,.3) transparent;
}
.faq-list::-webkit-scrollbar { width: 9px; }
.faq-list::-webkit-scrollbar-thumb { background: rgba(128,128,128,.3); border-radius: 9px; }
.faq-item {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(128,128,128,.06);
  margin-bottom: 9px;
  overflow: hidden;
}
.faq-q {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px;
  font-size: 13.5px; font-weight: 700;
  cursor: pointer;
  user-select: none;
}
.faq-q .faq-mark {
  flex: none; width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 6px;
  background: rgba(var(--pc, 124,92,255), .18);
  color: rgb(var(--pc, 124,92,255));
  font-size: 13px; font-weight: 900;
  transition: transform .2s;
}
.faq-item.open .faq-q .faq-mark { transform: rotate(90deg); }
.faq-q span { flex: 1; }
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height .28s ease, padding .28s ease;
  padding: 0 16px 0 46px;
  font-size: 12.5px; line-height: 1.85; color: var(--dim);
}
.faq-item.open .faq-a { max-height: 340px; padding-bottom: 14px; }

/* ---------- 手机竖屏适配 ---------- */
@media (max-width: 860px) and (orientation: portrait) {
  .pick-grid {
    padding: 12px; gap: 12px;
    grid-template-columns: 1fr;
  }
  .pick-card { padding: 15px; gap: 10px; }
  .pick-orb { width: 46px; height: 46px; font-size: 23px; border-radius: 13px; }
  .pick-meta h3 { font-size: 15px; }
  .detail-el-grid { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); }
  .detail-el { height: 62px; font-size: 19px; }
  .faq-list { padding: 12px 14px 22px; }
  .faq-q { padding: 12px 13px; font-size: 12.5px; }
  .faq-a { padding-left: 40px; font-size: 12px; }
  .ach-rate { font-size: 10px; padding: 3px 8px; }
}

@media (orientation: landscape) and (max-height: 560px) {
  .pick-grid { padding: 12px; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
  .pick-card { padding: 14px; gap: 9px; }
  .pick-orb { width: 42px; height: 42px; font-size: 21px; }
  .pick-meta h3 { font-size: 14.5px; }
  .faq-list { padding: 12px 16px 22px; }
}


/* ============================================================
 *  v1.1 合成树 · 图鉴种类筛选 · 榜单切换
 * ============================================================ */

/* ---------- 合成树弹窗 ---------- */
.dialog-wide .dialog-box {
  width: min(760px, calc(100vw - 40px));
  max-height: min(84vh, 900px);
  display: flex; flex-direction: column;
  text-align: left;
  padding: 0;
  overflow: hidden;
}
#tree-body { display: flex; flex-direction: column; min-height: 0; flex: 1; }

.dialog-tree-head {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.dialog-tree-head h3 { margin: 0 0 3px; font-size: 18px; }
.dialog-tree-head p { margin: 0; font-size: 12px; color: var(--dim); }
.tree-emoji.big { font-size: 36px; font-family: var(--emoji-font); }

.tree-canvas {
  flex: 1; min-height: 0;
  overflow: auto;
  padding: 20px;
  -webkit-overflow-scrolling: touch;
}
.tree-canvas::-webkit-scrollbar { width: 9px; height: 9px; }
.tree-canvas::-webkit-scrollbar-thumb { background: rgba(128,128,128,.3); border-radius: 9px; }

.tree-branch { display: flex; align-items: center; gap: 10px; }
.tree-children {
  display: flex; align-items: center; gap: 8px;
  padding-left: 14px;
  border-left: 1px dashed rgba(var(--pc, 124, 92, 255), .45);
  margin-left: 4px;
}
.tree-node {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(128, 128, 128, .09);
  white-space: nowrap;
  font-size: 12.5px;
}
.tree-node.base {
  border-color: rgba(74, 222, 128, .5);
  background: rgba(74, 222, 128, .12);
}
.tree-emoji { font-family: var(--emoji-font); font-size: 17px; }
.tree-name { font-weight: 700; }
.tree-tag {
  font-size: 9.5px; padding: 1px 6px; border-radius: 99px;
  background: rgba(74, 222, 128, .25); color: #86efac; font-weight: 700;
}
.tree-plus { color: var(--dim2); font-weight: 800; font-size: 15px; }
.tree-node.leaf { opacity: .8; }

.tree-open { width: 100%; justify-content: center; margin-top: 14px; }

/* ---------- 图鉴种类筛选 ---------- */
.kind-tabs { flex-wrap: wrap; }
.kind-tabs button { flex: 1 1 auto; min-width: 68px; font-size: 11.5px; }
.wiki-tools .kind-tabs { margin-left: 4px; }

/* ---------- 榜单切换页签 ---------- */
.rank-board-tabs {
  display: flex; gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.rank-board-tabs button {
  flex: 0 1 auto; min-width: 84px;
  padding: 7px 14px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: rgba(128, 128, 128, .1);
  color: var(--dim);
  font-size: 12.5px; font-weight: 700;
  cursor: pointer;
  transition: all .16s;
}
.rank-board-tabs button:hover { color: var(--text); background: rgba(128, 128, 128, .2); }
.rank-board-tabs button.active {
  color: #06210f;
  background: linear-gradient(135deg, #7c5cff, #22d3ee);
  border-color: transparent;
}
.rank-note { font-size: 11px; color: var(--dim2); margin-left: 4px; }

/* ---------- 手机竖屏 ---------- */
@media (max-width: 860px) and (orientation: portrait) {
  .dialog-wide .dialog-box { width: calc(100vw - 24px); max-height: 82vh; }
  .dialog-tree-head { padding: 14px 16px 11px; }
  .tree-canvas { padding: 14px; }
  .tree-node { padding: 6px 9px; font-size: 11.5px; }
  .tree-emoji { font-size: 15px; }
  .tree-children { padding-left: 10px; gap: 6px; }
  .rank-board-tabs button { flex: 1 1 40%; }
  .kind-tabs button { min-width: 60px; }
}


/* ---------- 合成树（v1.1 纵向缩进版） ---------- */
.dialog-wide .dialog-box {
  width: min(680px, calc(100vw - 32px));
  max-height: min(86vh, 880px);
  display: flex; flex-direction: column;
  text-align: left;
  padding: 0;
  overflow: hidden;
}
#tree-body { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.tree-foot {
  flex: none;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
}
.tree-foot .btn { width: 100%; justify-content: center; }

.tree-canvas {
  flex: 1; min-height: 0;
  overflow: auto;
  padding: 14px 20px 18px;
  -webkit-overflow-scrolling: touch;
}
.tree-canvas::-webkit-scrollbar { width: 9px; height: 9px; }
.tree-canvas::-webkit-scrollbar-thumb { background: rgba(128,128,128,.3); border-radius: 9px; }

.tnode { position: relative; }
.trow {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px;
  margin: 2px 0;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: rgba(128, 128, 128, .09);
  font-size: 12.5px;
  white-space: nowrap;
}
.tnode.base > .trow {
  border-color: rgba(74, 222, 128, .55);
  background: rgba(74, 222, 128, .13);
}
.tnode.unknown > .trow { opacity: .55; }
.temoji { font-family: var(--emoji-font); font-size: 16px; }
.tname { font-weight: 700; }
.ttag {
  font-size: 9.5px; padding: 1px 6px; border-radius: 99px;
  background: rgba(74, 222, 128, .25); color: #86efac; font-weight: 700;
}

.tkids {
  margin-left: 13px;
  padding-left: 13px;
  border-left: 1px dashed rgba(124, 92, 255, .45);
}
.tkids .tnode { margin-bottom: 1px; }
.tcut {
  font-size: 11px;
  color: var(--dim2);
  padding: 2px 0 4px 10px;
}

@media (max-width: 860px) and (orientation: portrait) {
  .dialog-wide .dialog-box { width: calc(100vw - 20px); max-height: 84vh; }
  .tree-canvas { padding: 10px 14px 14px; }
  .trow { padding: 4px 8px; font-size: 11.5px; }
  .temoji { font-size: 14px; }
  .tkids { margin-left: 9px; padding-left: 9px; }
}


/* ============================================================
 *  搜索行 + 筛选按钮 + 弹出面板
 * ============================================================ */

.search-row {
  display: flex; align-items: center; gap: 8px;
  flex: 1 1 auto; min-width: 0;
}
.search-row .lib-search { flex: 1 1 auto; min-width: 0; }

.filter-btn {
  position: relative;
  flex: none;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: rgba(128, 128, 128, .1);
  color: var(--dim);
  font-size: 16px; line-height: 1;
  cursor: pointer;
  transition: all .16s;
}
.filter-btn:hover { color: var(--text); background: rgba(128, 128, 128, .22); }
.filter-btn:active { transform: scale(.94); }
.filter-dot {
  position: absolute; top: 5px; right: 5px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #f472b6;
  box-shadow: 0 0 8px rgba(244, 114, 182, .9);
}
.filter-dot[hidden] { display: none; }

.filter-pop {
  position: fixed;
  z-index: 990;
  width: 300px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--line-strong);
  background: var(--panel-solid);
  box-shadow: 0 28px 70px -30px rgba(0, 0, 0, .95);
  animation: fpIn .18s cubic-bezier(.16, 1.1, .3, 1) both;
}
.filter-pop[hidden] { display: none; }
@keyframes fpIn {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to { opacity: 1; transform: none; }
}

.fp-group { margin-bottom: 13px; }
.fp-label {
  font-size: 10.5px; font-weight: 800; letter-spacing: 2px;
  color: var(--dim2); margin-bottom: 7px;
}
.fp-row { display: flex; flex-wrap: wrap; gap: 6px; }
.fp-row button {
  flex: 0 1 auto;
  padding: 6px 11px;
  border-radius: 9px;
  border: 1px solid var(--line-strong);
  background: rgba(128, 128, 128, .1);
  color: var(--dim);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all .14s;
}
.fp-row button:hover { color: var(--text); background: rgba(128, 128, 128, .2); }
.fp-row button.active {
  color: #06210f;
  background: linear-gradient(135deg, #7c5cff, #22d3ee);
  border-color: transparent;
}
.fp-dlc-row button { font-size: 11.5px; padding: 5px 9px; }
.fp-hint {
  margin-top: 7px;
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--dim2);
}
.fp-foot {
  display: flex; gap: 8px; justify-content: flex-end;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.fp-foot .btn { padding: 7px 14px; }

/* ============================================================
 *  合成树（图形树：节点绝对定位 + SVG 连线）
 * ============================================================ */
.tree-graph {
  position: relative;
  min-width: 100%;
}
.tree-svg {
  position: absolute; top: 0; left: 0;
  pointer-events: none;
  overflow: visible;
}
.tree-svg path {
  fill: none;
  stroke: rgba(124, 92, 255, .5);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tree-svg path.base-edge { stroke: rgba(74, 222, 128, .55); }

.gnode {
  position: absolute;
  display: flex; align-items: center; gap: 6px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(26, 32, 54, .96);
  font-size: 12px;
  white-space: nowrap;
  box-sizing: border-box;
}
.gnode.base {
  border-color: rgba(74, 222, 128, .6);
  background: rgba(20, 44, 30, .96);
}
.gnode.unknown { opacity: .55; }
.gnode .gemoji { font-family: var(--emoji-font); font-size: 15px; }
.gnode .gname { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.gnode .gtag {
  font-size: 9px; padding: 0 5px; border-radius: 99px;
  background: rgba(74, 222, 128, .25); color: #86efac; font-weight: 700;
}

@media (max-width: 860px) and (orientation: portrait) {
  .filter-pop { width: calc(100vw - 20px); }
  .fp-row button { font-size: 11.5px; padding: 6px 9px; }
  .filter-btn { width: 34px; height: 34px; font-size: 15px; }
}


/* ---------- 合成树：可点击节点 ---------- */
.gnode.clickable {
  cursor: pointer;
  transition: border-color .16s, background .16s, transform .12s, box-shadow .16s;
}
.gnode.clickable:hover {
  border-color: rgba(124, 92, 255, .95);
  background: rgba(52, 44, 100, .98);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -8px rgba(124, 92, 255, 1);
}
.gnode.clickable:active { transform: scale(.97); }
.gnode.cut { border-style: dashed; opacity: .6; }
.gtag.cut-tag { background: rgba(148, 163, 184, .2); color: #94a3b8; }
.tree-foot-note {
  flex: none;
  padding: 0 20px 10px;
  font-size: 11px;
  color: var(--dim2);
}


/* ---------- 合成树：返回上一级 ---------- */
.tree-back {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: rgba(128, 128, 128, .12);
  color: var(--text);
  font-size: 17px; line-height: 1;
  cursor: pointer;
  transition: background .16s, transform .12s;
}
.tree-back:hover { background: rgba(124, 92, 255, .3); }
.tree-back:active { transform: scale(.94); }


/* ============================================================
 *  通知
 * ============================================================ */
.notice-view {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 20px 22px 32px;
}
.notice-view::-webkit-scrollbar { width: 9px; }
.notice-view::-webkit-scrollbar-thumb { background: rgba(128,128,128,.3); border-radius: 9px; }
.notice-view[hidden] { display: none; }

.notice-card {
  max-width: 760px;
  margin: 0 auto;
  padding: 26px 28px 22px;
  border-radius: 18px;
  border: 1px solid var(--line-strong);
  background: var(--panel-solid);
  box-shadow: 0 26px 60px -40px rgba(0, 0, 0, .9);
}
.notice-title {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .5px;
  line-height: 1.4;
}
.notice-title::after {
  content: '';
  display: block;
  width: 46px; height: 3px;
  margin-top: 12px;
  border-radius: 3px;
  background: linear-gradient(90deg, #7c5cff, #22d3ee);
}
.notice-body p {
  margin: 0 0 13px;
  font-size: 13.5px;
  line-height: 1.95;
  color: var(--text);
}
.notice-body p:last-child { margin-bottom: 0; }
.notice-footer {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  font-size: 11.5px;
  color: var(--dim2);
}

/* ============================================================
 *  公告富文本行内格式
 * ============================================================ */
.news-summary b, .news-group li b, .news-group h4 b,
.faq-q b, .faq-a b, .notice-body b {
  color: #fff;
  font-weight: 800;
}
.news-summary i, .news-group li i, .faq-a i, .notice-body i { font-style: italic; opacity: .92; }
.news-summary s, .news-group li s, .faq-a s, .notice-body s { opacity: .55; }
.news-summary mark, .news-group li mark, .faq-a mark, .notice-body mark {
  background: rgba(251, 191, 36, .26);
  color: #fde68a;
  padding: 0 3px;
  border-radius: 4px;
}
.news-summary code, .news-group li code, .faq-a code, .notice-body code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: .92em;
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(124, 92, 255, .2);
  color: #c4b5fd;
}
.theme-card .theme-action {
  width: 100%;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid var(--line-strong);
  background: rgba(128,128,128,.12);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.theme-card .theme-action.primary {
  border-color: transparent;
  background: linear-gradient(135deg, #7c5cff, #22d3ee);
  color: #06210f;
}
.theme-card .theme-action:disabled { opacity: .45; cursor: default; }

@media (max-width: 860px) and (orientation: portrait) {
  .notice-view { padding: 12px 12px 24px; }
  .notice-card { padding: 18px 16px 16px; border-radius: 14px; }
  .notice-title { font-size: 17px; }
  .notice-body p { font-size: 12.5px; line-height: 1.85; }
}


/* ============================================================
 *  新作宣传弹窗
 * ============================================================ */
.dialog-box.promo-box {
  position: relative;
  overflow: hidden;
  border-color: rgba(124, 92, 255, .45);
  box-shadow: 0 40px 90px -40px rgba(124, 92, 255, .9),
              0 0 0 1px rgba(124, 92, 255, .25) inset;
}
.promo-aura {
  position: absolute;
  left: 50%; top: -40%;
  width: 320px; height: 320px;
  margin-left: -160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 92, 255, .5) 0%, rgba(34, 211, 238, .18) 45%, transparent 70%);
  filter: blur(6px);
  pointer-events: none;
  animation: promoAura 5s ease-in-out infinite alternate;
}
@keyframes promoAura {
  from { transform: scale(.9); opacity: .75; }
  to { transform: scale(1.15); opacity: 1; }
}
.promo-icon {
  position: relative;
  animation: promoFloat 2.6s ease-in-out infinite alternate;
}
@keyframes promoFloat {
  from { transform: translateY(0); }
  to { transform: translateY(-5px); }
}
.promo-title {
  position: relative;
  background: linear-gradient(135deg, #c4b5fd, #67e8f9);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.promo-desc { position: relative; }
.promo-actions { position: relative; }

/* ============================================================
 *  穿越时空动画
 * ============================================================ */
.warp {
  position: fixed;
  inset: 0;
  z-index: 12000;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, #0d1b33 0%, #05070f 55%, #000 100%);
}
.warp[hidden] { display: none; }

.warp-rays { position: absolute; inset: 0; }
.warp-rays i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 46vmax;
  margin-left: -1px;
  margin-top: -46vmax;
  transform-origin: 50% 100%;
  background: linear-gradient(to top,
    rgba(150, 210, 255, 0) 0%,
    rgba(180, 230, 255, .85) 60%,
    rgba(255, 255, 255, .95) 100%);
  opacity: 0;
  will-change: transform, opacity;
}
.warp.play .warp-rays i {
  animation: warpRay .8s cubic-bezier(.3, .1, .7, .9) infinite;
}
@keyframes warpRay {
  0%   { opacity: 0;  transform: rotate(var(--a)) scaleY(.05); }
  18%  { opacity: .95; }
  100% { opacity: 0;  transform: rotate(var(--a)) scaleY(1.7); }
}

.warp-core {
  position: absolute;
  left: 50%; top: 50%;
  width: 12vmin; height: 12vmin;
  margin: -6vmin 0 0 -6vmin;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #a9dcff 35%, rgba(110, 170, 255, .35) 60%, transparent 72%);
  opacity: 0;
  will-change: transform, opacity;
}
.warp.play .warp-core {
  animation: warpCore 1.5s cubic-bezier(.4, 0, .6, 1) forwards;
}
@keyframes warpCore {
  0%   { opacity: 0; transform: scale(.15); }
  32%  { opacity: 1; transform: scale(1); }
  70%  { opacity: 1; transform: scale(2.6); }
  100% { opacity: 1; transform: scale(16); }
}

.warp-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
.warp.flash .warp-flash {
  animation: warpFlash .55s ease-in forwards;
}
@keyframes warpFlash {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.warp-text {
  position: absolute;
  left: 0; right: 0;
  bottom: 18%;
  text-align: center;
  font-size: 13px;
  letter-spacing: 8px;
  color: rgba(200, 230, 255, .85);
  opacity: 0;
}
.warp.play .warp-text {
  animation: warpText 1.6s ease-in forwards;
}
@keyframes warpText {
  0%   { opacity: 0; letter-spacing: 4px; }
  30%  { opacity: .9; }
  75%  { opacity: .55; letter-spacing: 12px; }
  100% { opacity: 0; letter-spacing: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .warp.play .warp-rays i { animation-duration: 1.6s; }
  .promo-icon, .promo-aura { animation: none; }
}

@media (max-width: 860px) and (orientation: portrait) {
  .dialog-box.promo-box { padding: 22px 18px; text-align: center; }
  /* 移动端默认会隐藏弹窗图标，宣传弹窗单独保留 */
  .promo-box .dialog-icon { display: block; font-size: 34px; margin-bottom: 8px; }
  .promo-title { font-size: 18px; }
  .promo-desc { font-size: 12.5px; line-height: 1.8; }
  .warp-text { font-size: 11px; letter-spacing: 5px; }
}


/* ============================================================
 *  启动失败提示
 * ============================================================ */
.boot-error {
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 99999;
  width: min(520px, calc(100vw - 32px));
  padding: 22px 24px;
  border-radius: 16px;
  border: 1px solid rgba(251, 113, 133, .5);
  background: rgba(30, 12, 18, .97);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .95);
  color: #fecdd3;
  font-size: 13px;
  line-height: 1.85;
}
.boot-error h3 {
  margin: 0 0 10px;
  font-size: 17px;
  color: #fda4af;
}
.boot-error p { margin: 0 0 9px; }
.boot-error p:last-child { margin-bottom: 0; }
.boot-error b { color: #fff; }
.boot-error code {
  font-family: ui-monospace, Consolas, monospace;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .12);
}
.boot-error-hint { opacity: .8; font-size: 12px; }


/* ============================================================
 *  顶栏「续作」按钮：常驻发光
 * ============================================================ */
.btn.promo-btn {
  position: relative;
  border-color: transparent;
  color: #06210f;
  background: linear-gradient(135deg, #a78bfa, #22d3ee);
  font-weight: 800;
  overflow: hidden;
  animation: promoPulse 2.4s ease-in-out infinite;
}
.btn.promo-btn:hover {
  color: #06210f;
  background: linear-gradient(135deg, #c4b5fd, #67e8f9);
  animation-play-state: paused;
  box-shadow: 0 0 0 1px rgba(196, 181, 253, .9),
              0 0 22px rgba(124, 92, 255, .95),
              0 0 40px rgba(34, 211, 238, .6);
}
.btn.promo-btn:active { transform: scale(.96); }

/* 周期性扫过的高光 */
.btn.promo-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .85), transparent);
  transform: skewX(-18deg);
  animation: promoSheen 3.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes promoPulse {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(167, 139, 250, .55),
                0 0 10px rgba(124, 92, 255, .55),
                0 0 20px rgba(34, 211, 238, .28);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(196, 181, 253, .95),
                0 0 20px rgba(124, 92, 255, .95),
                0 0 38px rgba(34, 211, 238, .62);
  }
}

@keyframes promoSheen {
  0%, 62% { left: -60%; }
  92%, 100% { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
  .btn.promo-btn { animation: none; box-shadow: 0 0 12px rgba(124, 92, 255, .7); }
  .btn.promo-btn::after { animation: none; display: none; }
}

/* 窄屏：只留图标，避免顶栏挤爆 */
@media (max-width: 860px) and (orientation: portrait) {
  .btn.promo-btn { padding: 6px 9px; }
  .btn.promo-btn span { display: none; }
}


/* ============================================================
 *  存档码
 * ============================================================ */
.savecode {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.savecode-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--dim2);
}
.savecode-note {
  font-size: 11px;
  line-height: 1.7;
  color: var(--dim);
}
.savecode-note b.warn { color: #fda4af; }
.savecode-out {
  padding: 10px 11px;
  border-radius: 10px;
  border: 1px solid rgba(124, 92, 255, .45);
  background: rgba(124, 92, 255, .12);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 10.5px;
  line-height: 1.7;
  word-break: break-all;
  user-select: all;
}
.savecode-out[hidden] { display: none; }
.savecode-input { font-size: 11px; }
.savecode-msg {
  font-size: 11px;
  line-height: 1.6;
  min-height: 14px;
  color: var(--dim2);
}
.savecode-msg.ok { color: #86efac; }
.savecode-msg.bad { color: #fda4af; }
.savecode .btn { width: 100%; justify-content: center; }


/* ---------- 扩展包卡片：防止被压扁 ---------- */
/*
 * 问题：.dlc-grid 是「可滚动的固定高度 grid」，grid 默认会给行分配
 * minmax(auto, ...)，但子项内部有 flex/overflow 时 auto 会退化成 0，
 * 于是卡片被压成一条 32px 的细条，内容全被裁掉。
 * 修法：给行用 min-content 保底高度，并禁止子项收缩。
 */
.dlc-grid,
.theme-grid {
  grid-auto-rows: min-content;
  align-content: start;
}
.dlc-grid > .pick-card,
.theme-grid > .theme-card {
  min-height: min-content;
  height: auto;
  align-self: start;
  flex: 0 0 auto;
  overflow: visible;
}

/* 卡片内部不再被裁切，文字该换行就换行 */
.pick-card .pick-top { flex: 0 0 auto; min-width: 0; }
.pick-card .pick-meta { min-width: 0; }
.pick-card .pick-meta h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  line-height: 1.35;
}
.pick-card .pick-meta h3 small {
  display: inline;
  white-space: normal;
  font-size: 11px;
  opacity: .8;
}
.pick-card .pick-meta p {
  display: block;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.6;
}
.pick-card .pick-card-foot {
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 6px 10px;
  min-width: 0;
}
.pick-card .pick-state,
.pick-card .pick-count { white-space: normal; }

/* 竖屏移动端：单列、卡片更紧凑但仍完整 */
@media (max-width: 860px) and (orientation: portrait) {
  .dlc-grid,
  .theme-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
    grid-auto-rows: min-content;
  }
  .pick-card {
    padding: 12px;
    gap: 9px;
    border-radius: 14px;
  }
  .pick-card .pick-orb {
    width: 40px; height: 40px;
    border-radius: 11px;
    font-size: 21px;
  }
  .pick-card .pick-meta h3 { font-size: 13.5px; }
  .pick-card .pick-meta h3 small { font-size: 10px; }
  .pick-card .pick-meta p { font-size: 11px; line-height: 1.55; }
  .pick-card .pick-state { font-size: 10.5px; padding: 2px 7px; }
  .pick-card .pick-count { font-size: 10px; }
}

/* 横屏移动端也保证不压扁 */
@media (max-height: 560px) {
  .dlc-grid, .theme-grid { grid-auto-rows: min-content; }
  .pick-card { padding: 12px; gap: 8px; }
  .pick-card .pick-orb { width: 38px; height: 38px; font-size: 20px; }
}


/* ---------- 扩展包卡片：移动端排版 ---------- */
/* 标题区：小标题换行到下一行，不再被挤出容器 */
.pick-card .pick-meta h3 {
  display: block;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.pick-card .pick-meta h3 small {
  display: block;
  margin-top: 3px;
  white-space: normal;
  overflow-wrap: anywhere;
}
.pick-card .pick-meta p {
  overflow-wrap: anywhere;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 脚注：状态与数量各占一行，窄屏也不会把数量挤没 */
.pick-card .pick-card-foot {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.pick-card .pick-count {
  white-space: nowrap;
  margin-left: auto;
}

@media (max-width: 860px) and (orientation: portrait) {
  .pick-card .pick-top { align-items: flex-start; }
  .pick-card .pick-meta { flex: 1 1 auto; }
  .pick-card .pick-meta h3 { font-size: 13.5px; font-weight: 800; }
  .pick-card .pick-meta h3 small { font-size: 10px; margin-top: 2px; }
  .pick-card .pick-meta p {
    font-size: 11px;
    line-height: 1.55;
    margin-top: 4px;
    -webkit-line-clamp: 2;
  }
  .pick-card .pick-card-foot { margin-top: 2px; }
  .pick-card .pick-state { font-size: 10px; padding: 3px 8px; }
  .pick-card .pick-count { font-size: 10px; }
}

/* 主题卡片同样处理 */
@media (max-width: 860px) and (orientation: portrait) {
  .theme-card .theme-head { align-items: flex-start; }
  .theme-card .theme-meta { min-width: 0; flex: 1 1 auto; }
  .theme-card .theme-meta h3 { font-size: 13.5px; }
  .theme-card .theme-meta p {
    font-size: 11px;
    line-height: 1.55;
    overflow-wrap: anywhere;
  }
  .theme-card .theme-swatch { flex-wrap: wrap; }
}


/* ---------- 抽屉：收起时彻底移出布局 ---------- */
/*
 * 原来只写了 transform: translateX(101%)，抽屉会被推到可视区右侧外面，
 * 虽然看不见，但仍参与 overflow 计算 —— 于是 body 出现 500px 的横向滚动宽度，
 * 移动端上 DLC / 主题卡片跟着被撑宽、右侧内容被裁掉。
 * 这里补 visibility:hidden，并让容器裁掉横向溢出。
 */
.drawer {
  visibility: hidden;
  pointer-events: none;
}
.drawer.open {
  visibility: visible;
  pointer-events: auto;
}

/* 页面容器裁掉横向溢出，避免任何绝对定位元素把版面撑宽 */
.page-panel,
.panel.page-panel,
.view {
  overflow-x: hidden;
}

@media (max-width: 860px) and (orientation: portrait) {
  .drawer { max-width: 100vw; }
}

/* 移动端卡片宽度严格跟随容器，不被任何内容撑开 */
.pick-card,
.theme-card,
.pick-card * {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.pick-card .pick-meta,
.pick-card .pick-meta h3,
.pick-card .pick-meta p,
.pick-card .pick-card-foot {
  min-width: 0;
  max-width: 100%;
}


/* ============================================================
 *  主题：星野（关注作者解锁）
 *  深蓝夜幕 + 细碎星光 + 银河渐变描边
 * ============================================================ */
:root[data-theme="starry"] {
  --bg: #070b1c;
  --panel: rgba(16, 23, 48, .86);
  --panel-solid: #0d1430;
  --line: rgba(120, 148, 255, .22);
  --line-strong: rgba(140, 168, 255, .48);
  --text: #e6ecff;
  --dim: #9fb0d8;
  --dim2: #6b7ba6;
  --accent: #4f6bff;
  --accent2: #a5b4fc;
  --accent3: #7dd3fc;
  --ok: #4ade80;
  --bad: #fb7185;
  --radius: 12px;
  --font: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* 夜空背景：深蓝渐变 + 两层星点 */
:root[data-theme="starry"] body {
  background: #070b1c;
}
:root[data-theme="starry"] body::before {
  inset: 0;
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 12%, rgba(200,220,255,.85), transparent 60%),
    radial-gradient(1px 1px at 34% 42%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 62% 30%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1px 1px at 88% 58%, rgba(190,210,255,.7), transparent 60%),
    radial-gradient(1px 1px at 22% 72%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 52% 86%, rgba(200,225,255,.75), transparent 60%),
    radial-gradient(1px 1px at 70% 68%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(52% 42% at 76% 8%, rgba(79, 107, 255, .32), transparent 66%),
    radial-gradient(46% 38% at 16% 92%, rgba(125, 211, 252, .2), transparent 68%),
    linear-gradient(180deg, #070b1c 0%, #0a1130 55%, #070b1c 100%);
  filter: none;
  animation: starryDrift 90s linear infinite;
}
@keyframes starryDrift {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  to { background-position: 0 -120px, 0 -90px, 0 -140px, 0 -60px, 0 -110px, 0 -80px, 0 -130px, 0 -70px, 0 0, 0 0, 0 0; }
}
:root[data-theme="starry"] body::after { display: none; }

/* 面板与卡片：银河渐变描边 */
:root[data-theme="starry"] .panel,
:root[data-theme="starry"] .topbar,
:root[data-theme="starry"] .modal-panel {
  background: rgba(13, 20, 48, .9);
  border-color: rgba(120, 148, 255, .3);
  box-shadow: 0 0 0 1px rgba(120, 148, 255, .1), 0 30px 70px -40px rgba(79, 107, 255, .8);
}
:root[data-theme="starry"] .topbar {
  border-bottom: 1px solid rgba(120, 148, 255, .35);
}
:root[data-theme="starry"] .tile,
:root[data-theme="starry"] .wcard,
:root[data-theme="starry"] .chip,
:root[data-theme="starry"] .pick-card,
:root[data-theme="starry"] .theme-card,
:root[data-theme="starry"] .ach-card,
:root[data-theme="starry"] .news-card,
:root[data-theme="starry"] .notice-card,
:root[data-theme="starry"] .toast {
  background: linear-gradient(155deg, rgba(30, 44, 92, .82), rgba(13, 20, 48, .82));
  border-color: rgba(120, 148, 255, .26);
}
:root[data-theme="starry"] .tile:hover,
:root[data-theme="starry"] .wcard:hover,
:root[data-theme="starry"] .pick-card:hover {
  border-color: rgba(165, 180, 252, .8);
  box-shadow: 0 0 22px -8px rgba(79, 107, 255, .9);
}
:root[data-theme="starry"] .brand-text h1,
:root[data-theme="starry"] .news-ver,
:root[data-theme="starry"] .notice-title {
  background: linear-gradient(120deg, #a5b4fc, #7dd3fc 60%, #e6ecff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
:root[data-theme="starry"] .brand-orb {
  background: radial-gradient(circle at 35% 30%, #3d54d6, #0b1236);
  border: 1px solid rgba(165, 180, 252, .6);
  box-shadow: 0 0 26px -6px rgba(79, 107, 255, .95);
}
:root[data-theme="starry"] .progress-bar { background: rgba(120, 148, 255, .16); }
:root[data-theme="starry"] .progress-bar i {
  background: linear-gradient(90deg, #4f6bff, #7dd3fc, #a5b4fc);
  box-shadow: 0 0 14px rgba(125, 211, 252, .8);
}
:root[data-theme="starry"] .btn,
:root[data-theme="starry"] .btn.primary {
  background: rgba(30, 44, 92, .7);
  border-color: rgba(120, 148, 255, .38);
  color: #dbe4ff;
}
:root[data-theme="starry"] .btn:hover {
  background: rgba(60, 84, 170, .8);
  border-color: rgba(165, 180, 252, .95);
  color: #fff;
}
:root[data-theme="starry"] .btn.primary {
  background: linear-gradient(135deg, #4f6bff, #7dd3fc);
  border-color: transparent;
  color: #061024;
  font-weight: 800;
}
:root[data-theme="starry"] .navtabs button.active,
:root[data-theme="starry"] .lib-tabs button.active {
  background: linear-gradient(135deg, rgba(79, 107, 255, .5), rgba(125, 211, 252, .3));
  border-color: rgba(165, 180, 252, .9);
  color: #fff;
}
:root[data-theme="starry"] .count-badge {
  background: rgba(30, 44, 92, .8);
  border-color: rgba(120, 148, 255, .4);
  color: #a5b4fc;
}
:root[data-theme="starry"] .ws-grid-bg {
  background-image: radial-gradient(rgba(165, 180, 252, .26) 1px, transparent 1px);
}
:root[data-theme="starry"] .drawer {
  background: #0d1430;
  border-left-color: rgba(120, 148, 255, .35);
}
:root[data-theme="starry"] .drawer-handle {
  background: linear-gradient(135deg, #4f6bff, #7dd3fc);
  color: #061024;
  border-color: transparent;
}
:root[data-theme="starry"] .dialog-box {
  background: #0d1430;
  border-color: rgba(120, 148, 255, .45);
}

/* ============================================================
 *  主题：牛皮纸（三连解锁）
 *  牛皮纸底 + 深棕墨线 + 硬纸质感的块面
 * ============================================================ */
:root[data-theme="kraft"] {
  --bg: #e8dcc4;
  --panel: rgba(232, 220, 196, .95);
  --panel-solid: #e8dcc4;
  --line: rgba(122, 82, 48, .3);
  --line-strong: #7a5230;
  --text: #3b2a1a;
  --dim: #6b5540;
  --dim2: #9a866c;
  --accent: #7a5230;
  --accent2: #b08968;
  --accent3: #a0522d;
  --ok: #4a7c3f;
  --bad: #a33a2a;
  --radius: 3px;
  --font: "Songti SC", "STSong", "SimSun", "宋体", "Noto Serif SC", serif;
}

:root[data-theme="kraft"] body {
  background: #e8dcc4;
}
/* 纸纹：细密斜线 + 斑点 */
:root[data-theme="kraft"] body::before {
  inset: 0;
  background:
    repeating-linear-gradient(45deg, rgba(122, 82, 48, .055) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-45deg, rgba(122, 82, 48, .04) 0 1px, transparent 1px 7px),
    radial-gradient(2px 2px at 18% 24%, rgba(122, 82, 48, .1), transparent 60%),
    radial-gradient(2px 2px at 72% 62%, rgba(122, 82, 48, .09), transparent 60%),
    radial-gradient(1.5px 1.5px at 44% 82%, rgba(122, 82, 48, .08), transparent 60%),
    linear-gradient(180deg, #ece1cb 0%, #e8dcc4 50%, #ded0b4 100%);
  filter: none;
  animation: none;
}
:root[data-theme="kraft"] body::after { display: none; }

/* 块面：硬边 + 双层描边，做出纸片堆叠感 */
:root[data-theme="kraft"] .panel,
:root[data-theme="kraft"] .topbar,
:root[data-theme="kraft"] .modal-panel {
  background: #ece1cb;
  border: 1px solid #7a5230;
  box-shadow: 3px 3px 0 rgba(122, 82, 48, .18);
}
:root[data-theme="kraft"] .topbar {
  border-bottom: 2px solid #7a5230;
  box-shadow: 0 2px 0 rgba(122, 82, 48, .16);
}
:root[data-theme="kraft"] .tile,
:root[data-theme="kraft"] .wcard,
:root[data-theme="kraft"] .chip,
:root[data-theme="kraft"] .pick-card,
:root[data-theme="kraft"] .theme-card,
:root[data-theme="kraft"] .ach-card,
:root[data-theme="kraft"] .news-card,
:root[data-theme="kraft"] .notice-card,
:root[data-theme="kraft"] .toast {
  background: #f2e8d2;
  border: 1px solid rgba(122, 82, 48, .55);
  box-shadow: 2px 2px 0 rgba(122, 82, 48, .14);
  border-radius: 3px;
}
:root[data-theme="kraft"] .tile:hover,
:root[data-theme="kraft"] .wcard:hover,
:root[data-theme="kraft"] .pick-card:hover {
  border-color: #7a5230;
  box-shadow: 3px 3px 0 rgba(122, 82, 48, .3);
}
:root[data-theme="kraft"] .tile.locked,
:root[data-theme="kraft"] .wcard.locked {
  background: #e2d5bd;
  border-style: dashed;
}
:root[data-theme="kraft"] .brand-text h1,
:root[data-theme="kraft"] .news-ver,
:root[data-theme="kraft"] .notice-title {
  background: none;
  color: #6b4423;
  -webkit-text-fill-color: #6b4423;
  font-weight: 900;
  letter-spacing: 1px;
}
:root[data-theme="kraft"] .brand-orb {
  background: #f2e8d2;
  border: 2px solid #7a5230;
  box-shadow: 2px 2px 0 rgba(122, 82, 48, .28);
}
:root[data-theme="kraft"] .progress-bar {
  background: #dccdb0;
  border: 1px solid rgba(122, 82, 48, .5);
}
:root[data-theme="kraft"] .progress-bar i {
  background: linear-gradient(90deg, #7a5230, #a0522d);
  box-shadow: none;
}
:root[data-theme="kraft"] .btn {
  background: #f2e8d2;
  border: 1px solid #7a5230;
  color: #3b2a1a;
  box-shadow: 2px 2px 0 rgba(122, 82, 48, .22);
}
:root[data-theme="kraft"] .btn:hover {
  background: #7a5230;
  color: #f2e8d2;
}
:root[data-theme="kraft"] .btn.primary {
  background: #7a5230;
  border-color: #5e3d22;
  color: #f7efdd;
}
:root[data-theme="kraft"] .btn.primary:hover {
  background: #5e3d22;
}
:root[data-theme="kraft"] .navtabs button.active,
:root[data-theme="kraft"] .lib-tabs button.active {
  background: #7a5230;
  border-color: #5e3d22;
  color: #f7efdd;
  box-shadow: none;
}
:root[data-theme="kraft"] .count-badge {
  background: #f2e8d2;
  border-color: #7a5230;
  color: #6b4423;
}
:root[data-theme="kraft"] .ws-grid-bg {
  background-image:
    linear-gradient(rgba(122, 82, 48, .1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122, 82, 48, .1) 1px, transparent 1px);
  background-size: 26px 26px;
}
:root[data-theme="kraft"] .drawer {
  background: #ece1cb;
  border-left: 2px solid #7a5230;
  box-shadow: -6px 0 0 rgba(122, 82, 48, .14);
}
:root[data-theme="kraft"] .drawer-handle {
  background: #7a5230;
  color: #f7efdd;
  border-color: #5e3d22;
}
:root[data-theme="kraft"] .dialog-box {
  background: #f2e8d2;
  border: 2px solid #7a5230;
  box-shadow: 5px 5px 0 rgba(122, 82, 48, .26);
}
:root[data-theme="kraft"] .news-tag {
  background: #7a5230;
  color: #f7efdd;
}


/* 牛皮纸：对比度修正 */
:root[data-theme="kraft"] .lib-search,
:root[data-theme="kraft"] .search-row .lib-search {
  background: #f7efdd;
  border-color: #7a5230;
  color: #3b2a1a;
}
:root[data-theme="kraft"] .lib-search::placeholder { color: #9a866c; }
:root[data-theme="kraft"] .panel-title,
:root[data-theme="kraft"] .drawer-title,
:root[data-theme="kraft"] .fp-label,
:root[data-theme="kraft"] .brand-text p {
  color: #6b4423;
}
:root[data-theme="kraft"] .ws-empty .line1 { color: #5e4326; }
:root[data-theme="kraft"] .ws-empty .line2 { color: #8a7256; }
:root[data-theme="kraft"] .lib-count,
:root[data-theme="kraft"] .chip-count,
:root[data-theme="kraft"] .pick-count { color: #7a6248; }
:root[data-theme="kraft"] .news-summary,
:root[data-theme="kraft"] .news-group li,
:root[data-theme="kraft"] .faq-a,
:root[data-theme="kraft"] .notice-body p,
:root[data-theme="kraft"] .savecode-note { color: #4a3826; }
:root[data-theme="kraft"] .tile-name,
:root[data-theme="kraft"] .wcard-name { color: #3b2a1a; }
:root[data-theme="kraft"] .tile.locked .tile-name,
:root[data-theme="kraft"] .wcard.locked .wcard-name { color: #8a7256; }
:root[data-theme="kraft"] .navpager { background: #e2d5bd; border-color: #7a5230; }
:root[data-theme="kraft"] .navpager-label { color: #5e3d22; }
:root[data-theme="kraft"] .fp-row button {
  background: #f2e8d2;
  border-color: #7a5230;
  color: #3b2a1a;
}
:root[data-theme="kraft"] .fp-row button.active {
  background: #7a5230;
  border-color: #5e3d22;
  color: #f7efdd;
}
:root[data-theme="kraft"] .theme-tag,
:root[data-theme="kraft"] .pick-state {
  background: #e2d5bd;
  border-color: #7a5230;
  color: #5e3d22;
}
:root[data-theme="kraft"] .pick-state.ok { background: #d7e3ca; border-color: #4a7c3f; color: #2f5228; }
:root[data-theme="kraft"] .pick-state.can { background: #7a5230; color: #f7efdd; border-color: transparent; }

/* 星野：搜索框与次要文字 */
:root[data-theme="starry"] .lib-search {
  background: rgba(20, 30, 66, .9);
  border-color: rgba(120, 148, 255, .38);
  color: #e6ecff;
}
:root[data-theme="starry"] .lib-search::placeholder { color: #7b8bb5; }
:root[data-theme="starry"] .panel-title { color: #c7d2fe; }