/* ==================== 口袋挂机 - 掌机风格 ==================== */

:root {
  --color-text: #1f1f1f;
  --color-muted: #7c7c7c;
  --screen-bg: #73c5a4;
  --screen-bg-dark: #4c8d73;
  --screen-bg-light: #96d0b9;
  --ui-color: #376d56;
  --ui-color-dark: #24563f;
  --ui-color-darker: #1d4937;
  --ui-color-rgb: 48, 98, 48;
  --console-body: #e8dcc0;
  --console-border: #c4b692;
  --console-shadow: #b8a88a;
  --item-bg: rgba(255,255,255,0.15);
  --item-hover-bg: rgba(255,255,255,0.32);
  --item-border: rgba(0,0,0,0.08);
  --mj-overlay-bg: rgba(227,255,241,0.5);
  --mj-label-color: #2f6a4a;
}

/* 夜间模式：覆盖核心主题变量（深绿掌机调，外壳稍亮、内部屏幕更暗），开关入口在设置页 */
[data-theme="dark"] {
  --color-text: #dfe7e1;
  --color-muted: #8da69a;
  --screen-bg: #12211a;
  --screen-bg-dark: #0e1a13;
  --screen-bg-light: #172920;
  --ui-color: #5cb48d;
  --ui-color-dark: #3e8a68;
  --ui-color-darker: #2f6b4f;
  --ui-color-rgb: 92, 180, 141;
  --console-body: #0a0a0a;
  --console-border: #1f1f1f;
  --console-shadow: #000000;
  --item-bg: rgba(255,255,255,0.06);
  --item-hover-bg: rgba(255,255,255,0.14);
  --item-border: rgba(255,255,255,0.12);
  --mj-overlay-bg: rgba(255,255,255,0.08);
  --mj-label-color: #dfe7e1;
}

* { box-sizing: border-box; margin: 0; padding: 0; outline: none !important; user-select: none; -webkit-tap-highlight-color: transparent; }
input, textarea { user-select: text; }
button { user-select: none; }
button:focus { outline: none !important; box-shadow: none !important; }

html, body {
  height: 100%; width: 100%; overflow: hidden;
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 13px;
  color: var(--color-text);
  background: var(--console-body);
}
body { margin: 0; padding: 0; cursor: default; display: flex; align-items: center; justify-content: center; }

/* === 主机外壳 === */
/* Tauri 端：CSS 视口恒为 274×342（设计基准，Rust set_window_scale 用 JS 真实 dpr 计算 zoom，
   任意设备画面一致），用 100% 撑满即可。
   浏览器端（body.browser-mode）：基准尺寸 274×342 由 JS 按窗口比例设置 zoom（等价 Tauri 端
   WebView2 zoom factor）整体等比缩放——宽屏时上下贴边、窄屏时左右贴边，窗口不足
   274×342 时 zoom 保持 1 交由滚动查看 */
.console {
  width: 100%; height: 100%;
  max-width: 274px; max-height: 342px;
  display: flex;
  flex-direction: column;
  background: var(--console-body);
  position: relative;
}
body.browser-mode .console {
  width: 274px; height: 342px;
  max-width: none; max-height: none;
  /* 移动端 transform 缩放：禁止 flex 压缩基准尺寸 */
  flex-shrink: 0;
  /* 浏览器端特有的边框 */
  border: 2px solid var(--console-border);
  border-radius: 10px;
}
/* 浏览器端窗口小于 274×342 时可滚动查看完整界面（flex 居中会溢出裁剪） */
body.browser-mode { overflow: auto; }

/* === 标题栏 === */
.title-bar {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5px 0 12px;
  cursor: pointer;
  flex-shrink: 0;
}
.app-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--color-text);
  opacity: 0.8;
  user-select: none;
}
.window-controls { display: flex; gap: 3px; color: var(--color-text); }

.window-controls.controls-disabled {
  pointer-events: none;
  opacity: 0.5;
}

.control-btn {
  width: 24px; height: 24px;
  border: none; background: transparent;
  border-radius: 3px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s ease;
  -webkit-app-region: no-drag;
}
.control-btn:hover { background: rgba(0,0,0,0.08); }
.control-btn.window-icon { opacity: 0.7; }
.control-btn.window-icon:hover { opacity: 1; background: rgba(0,0,0,0.08); }
.control-btn.window-icon.active { opacity: 1; background: rgba(0,0,0,0.12); }
.control-btn svg { width: 15px; height: 15px; display: block; color: var(--color-text); fill: currentColor; }

/* 开场静音提示：静音按钮左侧的引导文案（仅开场显示，点击静音后消失） */
.intro-mute-hint {
  display: flex;
  align-items: center;
  font-size: 11px;
  color: rgba(0, 0, 0, 0.35);
  margin-right: 4px;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}

/* 标题栏应用入口红点 */
.control-btn.window-icon { position: relative; }
.title-bar-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 4px;
  height: 4px;
  background: #e74c3c;
  border-radius: 50%;
  z-index: 2;
}

/* === 屏幕区域 (上半) === */
.screen-wrapper {
  flex: 1;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 6px 10px;
  min-height: 0;
}

/* 屏幕背景色变量注册为可过渡的颜色：时空扭曲进入/退出时紫色系
   与默认绿色系之间平滑渐变，所有使用 var(--screen-bg*) 的子元素同步过渡 */
@property --screen-bg {
  syntax: '<color>';
  inherits: true;
  initial-value: #73c5a4;
}
@property --screen-bg-light {
  syntax: '<color>';
  inherits: true;
  initial-value: #96d0b9;
}
@property --screen-bg-dark {
  syntax: '<color>';
  inherits: true;
  initial-value: #4c8d73;
}

.screen.no-theme-trans {
  transition: none !important;
}

.screen {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  background: var(--screen-bg);
  border-radius: 10px;
  border: 3px solid var(--screen-bg-dark);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), 0 2px 4px rgba(0,0,0,0.15);
  transition: background-color 0.5s ease-out, border-color 0.5s ease-out,
    --screen-bg 0.5s ease-out, --screen-bg-light 0.5s ease-out, --screen-bg-dark 0.5s ease-out;
}

/* 屏幕内部渐变色块 */
.screen-inner {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 空闲状态*/
.idle-text {
  font-family: monospace;
  font-size: 16px;
  font-weight: 700;
  color: var(--ui-color);
  text-transform: uppercase;
  letter-spacing: 1px;
  user-select: none;
  padding: 8px 20px;
  text-align: center;
  margin-bottom: 100px;
}

/* 切歌提示：歌曲名从左淡淡滑入，停留后向左划回 */
.now-playing {
  position: absolute;
  top: 4px;
  left: 10px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100px;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateX(-140%);
  pointer-events: none;
}
.now-playing.np-in { animation: npSlideIn 0.6s ease forwards; }
.now-playing.np-out { animation: npSlideOut 0.6s ease forwards; }
@keyframes npSlideIn {
  from { opacity: 0; transform: translateX(-140%); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes npSlideOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-140%); }
}
.now-playing-icon {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  color: #fff;
}
.now-playing-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.now-playing-title {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
.now-playing-artist {
  font-size: 8px;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.75);
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
.now-playing-title > span, .now-playing-artist > span {
  display: inline-block;
  white-space: nowrap;
  padding-right: 8px;
}
.now-playing-title.scrolling > span, .now-playing-artist.scrolling > span {
  animation: marquee 8s linear infinite;
}

.walk-gif {
  position: absolute;
  bottom: 28px;
  left: 30%;
  width: 32px;
  height: 42px;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
  z-index: 30;
  user-select: none;
}
/* 角色动画：男女主共用尺寸/动画/位移，仅背景图不同*/
.walk-gif.walk {
  width: 32px;
  height: 44px;
  background-size: 900% 100%;
  animation: brendanWalk 0.6s steps(1) infinite;
}
.walk-gif.run {
  width: 32px;
  height: 42px;
  background-size: 900% 100%;
  animation: brendanRun 0.45s steps(1) infinite;
}
.walk-gif.fishing {
  width: 64px;
  height: 74px;
  transform: translate(-10px, 15px);
}
/* 男女主仅素材不同：性别类只声明背景图（钓鱼背景图由 fishing.js 按性别内联设置） */
.walk-gif.brendan.walk { background-image: url('./character/brendan-walk.png'); }
.walk-gif.may.walk     { background-image: url('./character/may-walk.png'); }
.walk-gif.brendan.run  { background-image: url('./character/brendan-run.png'); }
.walk-gif.may.run      { background-image: url('./character/may-run.png'); }
/* 捡道具（5帧, 32x23/帧 → 2x 显示 64×46；图由 JS 按性别内联切换） */
.walk-gif.get-item { width: 64px; height: 46px; transform: translateX(-15px); }
@keyframes brendanWalk {
  0%   { background-position: 0% 0; }
  25%  { background-position: 0% 0; }
  25.01% { background-position: 75% 0; }
  50%  { background-position: 75% 0; }
  50.01% { background-position: 12.5% 0; }
  75%  { background-position: 12.5% 0; }
  75.01% { background-position: 75% 0; }
  100% { background-position: 75% 0; }
}
@keyframes brendanRun {
  0%   { background-position: 0% 0; }
  25%  { background-position: 0% 0; }
  25.01% { background-position: 75% 0; }
  50%  { background-position: 75% 0; }
  50.01% { background-position: 12.5% 0; }
  75%  { background-position: 12.5% 0; }
  75.01% { background-position: 75% 0; }
  100% { background-position: 75% 0; }
}
/* Brendan 骑车 */
.walk-gif.bike {
  width: 64px;
  height: 46px;
  background-size: 128px 46px;
  transform: translateX(-8px);
  animation: brendanBike 0.25s steps(1) infinite;
}
.walk-gif.brendan.bike { background-image: url('./character/brendan-bike.png'); }
.walk-gif.may.bike     { background-image: url('./character/may-bike.png'); }
@keyframes brendanBike {
  0%   { background-position: 0px 0; }
  50%  { background-position: 0px 0; }
  50.01% { background-position: -64px 0; }
  100% { background-position: -64px 0; }
}



/* === 道具向主角移动 === */
.item-fly {
  position: absolute;
  z-index: 10;
  width: 16px;
  height: 16px;
  pointer-events: none;
  image-rendering: pixelated;
}

/* === 大量出没/普通遇敌宝可梦（道路滚动，上下跳动）=== */
.mass-poke {
  position: absolute;
  z-index: 11;
  width: 28px;
  height: 28px;
  pointer-events: none;
  transform: translateY(-10px);
  animation: pokeJump 0.5s steps(1, end) infinite;
}
.mass-poke-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  image-rendering: pixelated;
}
/* 闪光标记：右上角白色星星（同交换页面 NPC 旁的闪光表示） */
.mass-poke-shiny {
  position: absolute;
  right: -3px;
  top: -4px;
  width: 12px;
  height: 12px;
  color: #ffffff;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.6));
}
/* === 时空扭曲外观变体（RGB 分离 / 污染宝可梦）===
   仅外观特效，宝可梦功能与普通个体完全相同 */
.fx-variant-rgb {
  /* 强制独立合成层：滤镜对整层一次性应用，避免 GIF 动画逐帧重采样导致边缘重影频闪 */
  will-change: filter;
  transform: translateZ(0);
  filter:
    drop-shadow(3px 0 0 rgba(255, 0, 80, .65))
    drop-shadow(-3px 0 0 rgba(0, 220, 255, .65));
}
.fx-variant-polluted {
  filter: grayscale(1) sepia(1) hue-rotate(248deg) saturate(7) brightness(.65);
}

/* === 路面层 (Canvas 无限滚动) === */
.road-layer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 72px;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
}
.road-layer .road-canvas {
  display: block;
  image-rendering: pixelated;
}

/* 时空扭曲期间滚动道路变暗：canvas 整层降亮度，突出紫色氛围与滚动精灵 */
#screen.twist-active .road-layer .road-canvas {
  filter: brightness(0.65) saturate(0.85);
  transition: filter 0.4s ease-out;
}

/* 夜间模式滚动道路变暗（同时空扭曲的降亮度手法） */
[data-theme="dark"] .road-layer .road-canvas {
  filter: brightness(0.65) saturate(0.85);
  transition: filter 0.4s ease-out;
}

/* 夜间模式 tile 场景画布（饲育屋/训练场/田地/开场选角）降亮度 */
[data-theme="dark"] .nursery-field-canvas,
[data-theme="dark"] .train-field-canvas,
[data-theme="dark"] .berry-field-canvas,
[data-theme="dark"] .casino-scene-canvas,
[data-theme="dark"] #introSceneCanvas {
  filter: brightness(0.65);
}

/* 夜间模式场景贴图（box/告示牌/行走宝可梦/果树）降亮度 */
[data-theme="dark"] .train-walker-img,
[data-theme="dark"] .nursery-walker-img,
[data-theme="dark"] .train-box-sign,
[data-theme="dark"] .train-board-sign,
[data-theme="dark"] .nursery-box-sign,
[data-theme="dark"] .nursery-board-sign,
[data-theme="dark"] .berry-box-sign,
[data-theme="dark"] .berry-board-sign,
[data-theme="dark"] .berry-frame {
  filter: brightness(0.65);
}

/* 时空扭曲期间屏幕容器变色：背景与边框换成紫色系（场景整体泛紫，随遮罩一起显隐）。
   UI 文字色改白，避免深绿与紫底撞色看不清 */
.screen.twist-active {
  background: #8a5aa6;
  --screen-bg: #8a5aa6;
  --screen-bg-light: #a98ac4;
  --screen-bg-dark: #5d3a78;
  --ui-color: #ffffff;
  --ui-color-rgb: 255, 255, 255;
}
/* 夜间模式时空扭曲：紫色套件整体调暗，白字改柔和（与暗紫背景协调） */
[data-theme="dark"] .screen.twist-active {
  background: #523069;
  --screen-bg: #523069;
  --screen-bg-light: #6d4a86;
  --screen-bg-dark: #3a2149;
  --ui-color: var(--color-text);
  --ui-color-rgb: 223, 231, 225;
}

/* === 时空扭曲氛围遮罩 ===
   进入扭曲区域时覆盖整个屏幕（含主角）：紫色渐变 + 慢速闪烁，营造异时空涌动感。
   纯视觉层：pointer-events 穿透，不挡任何交互；透明度低，不影响角色/文字辨识。
   opacity 控制显隐（配合过渡淡入淡出），恢复挂机等退出场景时不再瞬间消失跳变。 */
.twist-overlay {
  position: absolute;
  inset: 0;
  z-index: 31;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease-out;
  background: radial-gradient(ellipse at 50% 30%, rgba(255, 120, 240, 0.16), rgba(174, 45, 225, 0.08) 55%, rgba(174, 45, 225, 0.04) 80%);
}
.twist-overlay.on {
  opacity: 1;
  animation: twistOverlayPulse 2.4s ease-in-out 0.5s infinite;
}
@keyframes twistOverlayPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* === 钓鱼期间水域上的漂浮物品 === */
.fish-float {
  position: absolute;
  width: 14px;
  height: 14px;
  opacity: 0.35;
  image-rendering: pixelated;
  pointer-events: none;
  z-index: 1;
  animation: fishFloat 6s ease-in-out infinite;
}
@keyframes fishFloat {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(9px, -4px); }
  50%      { transform: translate(3px, 3px); }
  75%      { transform: translate(-8px, -3px); }
}

/* === 遇敌 (屏幕内) === */
/* 绝对定位铺满屏幕内层（screen-inner 为 position:relative），
   避免作为 flex 子项被内容收缩（实测曾收缩为 248×211，导致像素定位基准偏小）；
   用显式 left/top/right/bottom 而非 inset，兼容旧 WebView */
#encounterView {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

/* === 孵蛋动画（独立页面） === */
/* 与遇敌页共用精灵位/角标样式，但自身铺满屏幕内层（同样用显式定位兼容旧 WebView） */
#hatchView {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.encounter-gif {
  position: absolute;
  left: 50%;
  bottom: 42%;
  transform: translateX(-50%);
  image-rendering: pixelated;
  z-index: 1;
  user-select: none;
  pointer-events: none;
}

.encounter-name {
  position: absolute;
  top: 6px;
  left: 6px;
  display: flex;
  align-items: center;
  gap: 3px;
  font-family: 'Segoe UI', 'Noto Sans SC', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ui-color);
  z-index: 2;
  margin-bottom: 2px;
  user-select: none;
}
/* 遇敌等级（无容器背景，纯文字） */
.encounter-lv {
  font-size: 10px;
  font-weight: 600;
  color: var(--ui-color);
  flex-shrink: 0;
}
.g-sym {
  flex-shrink: 0;
  vertical-align: -2px;
  margin: 0 1px;
  paint-order: stroke;
  stroke: var(--ui-color);
  stroke-width: 0.5;
  stroke-linejoin: round;
}
.g-female { color: #ff6b9d; }
.g-male { color: #4a9ff5; }
.g-genderless { color: #72caae; }

.encounter-types {
  position: absolute;
  top: 28px;
  left: 6px;
  display: flex;
  gap: 4px;
  z-index: 2;
  user-select: none;
}

.type-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 600;
  color: #fff;
  line-height: 1;
  user-select: none;
}

.encounter-right {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  z-index: 2;
  user-select: none;
  pointer-events: none;
}
.encounter-owned {
  width: 18px;
  height: 18px;
  color: var(--ui-color);
  user-select: none;
  pointer-events: none;
  cursor: pointer;
}
.encounter-owned-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  pointer-events: auto;
}
.encounter-owned-wrap .encounter-owned {
  pointer-events: auto;
}
.encounter-tooltip {
  position: absolute;
  top: 50%;
  right: calc(100% + 6px);
  transform: translateY(-50%);
  background: var(--screen-bg-dark);
  color: #fff;
  font-size: 9px;
  font-weight: normal;
  line-height: 1.5;
  padding: 3px 6px;
  border-radius: 3px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s;
  z-index: 10;
  pointer-events: none;
}
.encounter-owned-wrap:hover .encounter-tooltip {
  opacity: 1;
  visibility: visible;
}
/* 自定义树果提示*/
.food-tooltip {
  position: fixed;
  z-index: 9999;
  background: var(--screen-bg-dark);
  color: #fff;
  font-size: 10px;
  line-height: 1.5;
  padding: 3px 6px;
  border-radius: 3px;
  white-space: nowrap;
  pointer-events: none;
}
.encounter-catch-rate {
  font-size: 8px;
  font-weight: 600;
  color: var(--ui-color);
  text-align: right;
  white-space: nowrap;
  line-height: 1.4;
}
.encounter-new-label {
  font-size: 8px;
  font-weight: 700;
  color: var(--ui-color);
  text-align: right;
  white-space: nowrap;
  line-height: 1.4;
  animation: pulseNew 1.2s ease-in-out infinite;
}

/* 遭遇页外观变体标签（时空扭曲 RGB / 污染）：
   与文字框故障文案同款的 RGB 偏移重影字体，只在遭遇对应变体时显示 */
.encounter-variant-label {
  font-size: 8px;
  font-weight: 700;
  color: #ffffff;
  text-align: right;
  white-space: nowrap;
  text-shadow:
    1px 0 0 rgba(255, 45, 85, 0.6),
    -1px 0 0 rgba(45, 220, 255, 0.6);
  animation: twistTextGlitch 2.4s infinite steps(1, end);
}
@keyframes pulseNew {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* === 遇敌入场动画 === */
/* 左上角信息（名字/类型）从左上方平移入场（左上与右上同时，纯平移无透明度变化） */
#encounterView .encounter-name {
  animation: encFlyTL 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#encounterView .encounter-types {
  animation: encFlyTL 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* 右上角信息（已捕获/捕获率/新发现）从右上方平移入场 */
#encounterView .encounter-right {
  animation: encFlyTR 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes encFlyTL {
  from { transform: translate(-48px, -28px); }
  to   { transform: translate(0, 0); }
}
@keyframes encFlyTR {
  from { transform: translate(48px, -28px); }
  to   { transform: translate(0, 0); }
}
/* 敌人出现：纯缩放放大（从远到近），与左上/右上 UI 入场同时开始 */
#encounterView .encounter-gif {
  animation: encGrow 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes encGrow {
  from { transform: translateX(-50%) scale(0.6); }
  to   { transform: translateX(-50%) scale(1); }
}
/* 遇敌期间文字框慢速升起，主角背影同步被"顶起" */
#screen.encounter-intro .text-box {
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.text-box {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 52px;
  background: var(--console-body);
  border-top: 2px solid var(--console-border);
  z-index: 50;
  overflow: hidden;
  transition: transform 0.25s ease-out;
  display: flex;
  align-items: flex-start; /* 顶部对齐：长文案（如时空扭曲遭遇）换行后不会被垂直居中顶出 */
}

/* 时空扭曲期间（含遭遇）的文字框美化：更深紫背景，遭遇文案做故障 RGB 偏移重影
   （text-shadow 红/青错位模拟信号干扰，无需额外 DOM） */
#screen.twist-active .text-box {
  background: #6b4490; /* 比屏幕边框紫更深一档，文字框与场景有清晰分界 */
  border-top: 2px solid #a98ac4; /* 浅紫上边框线，维持文字框分隔感 */
}
[data-theme="dark"] #screen.twist-active .text-box {
  background: #3f2858;
  border-top-color: #6d4a86;
}
#screen.twist-active .text-box .text-box-content {
  color: #ffffff;
  text-shadow:
    1px 0 0 rgba(255, 45, 85, 0.55),   /* 红偏移（轻） */
    -1px 0 0 rgba(45, 220, 255, 0.55); /* 青偏移（轻） */
  animation: twistTextGlitch 2.4s infinite steps(1, end);
}
@keyframes twistTextGlitch {
  0%, 86%, 100% { transform: translate(0, 0); text-shadow: 1px 0 0 rgba(255,45,85,.55), -1px 0 0 rgba(45,220,255,.55); }
  88% { transform: translate(-0.8px, 0); text-shadow: 1.5px 0 0 rgba(255,45,85,.6), -0.8px 0 0 rgba(45,220,255,.45); }
  90% { transform: translate(0.8px, 0); text-shadow: 0.8px 0 0 rgba(255,45,85,.45), -1.5px 0 0 rgba(45,220,255,.6); }
  92% { transform: translate(0, 0); }
}
/* 夜间模式扭曲文字框：纯白改柔和淡色，故障色影保留 */
[data-theme="dark"] #screen.twist-active .text-box .text-box-content {
  color: var(--color-text);
}
/* 逃跑按钮：同文字框一起换白字白框，紫底可读 */
#screen.twist-active .text-box .flee-btn {
  color: #ffffff;
  border-color: #ffffff;
}
/* 捕获/孵蛋确认按钮（"是否查看详情？"的确定/取消）：紫色文字框内同样换白，hover 淡白底 */
#screen.twist-active .catch-confirm-btn {
  color: #ffffff;
  border-color: #ffffff;
}
#screen.twist-active .catch-confirm-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}
/* 继续箭头：内联 fill 无法被继承，强制覆盖为白色 */
#screen.twist-active .text-box .text-box-arrow path {
  fill: #ffffff;
}
[data-theme="dark"] #screen.twist-active .text-box .flee-btn,
[data-theme="dark"] #screen.twist-active .catch-confirm-btn {
  color: var(--color-text);
  border-color: var(--color-text);
}
[data-theme="dark"] #screen.twist-active .catch-confirm-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] #screen.twist-active .text-box .text-box-arrow path {
  fill: var(--color-text);
}
.text-box.show {
  transform: translateY(0) !important;
}

.text-box-content {
  flex: 1;
  padding: 8px 10px;
  font-family: monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--ui-color);
  line-height: 1.4;
  user-select: none;
}

.text-box-arrow {
  position: absolute;
  bottom: 4px;
  right: 6px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.12s;
  user-select: none;
  line-height: 1;
  animation: textBoxArrowBounce 0.9s steps(1, end) infinite;
}
.text-box-arrow:active { animation: none; transform: scale(0.85); }
@keyframes textBoxArrowBounce {
  0%, 33% { transform: translateY(0); }
  34%, 66% { transform: translateY(2px); }
  67%, 100% { transform: translateY(0); }
}

.flee-btn {
  position: absolute;
  right: 8px;
  bottom: 6px;
  font-size: 10px;
  font-weight: 700;
  color: var(--ui-color);
  cursor: pointer;
  padding: 2px 6px;
  border: 1px solid var(--ui-color);
  border-radius: 3px;
  user-select: none;
  transition: background 0.15s;
}
.flee-btn:hover { background: rgba(var(--ui-color-rgb),0.15); }
.flee-btn:active { transform: scale(0.92); }
.flee-btn.disabled { opacity: 0.4; pointer-events: none; cursor: default; }

.catch-confirm-btns {
  position: absolute;
  bottom: 4px;
  right: 6px;
  display: flex;
  gap: 4px;
  align-items: center;
}
.catch-confirm-btn {
  font-size: 10px;
  font-weight: 700;
  color: var(--ui-color);
  cursor: pointer;
  padding: 2px 8px;
  border: 1px solid var(--ui-color);
  border-radius: 3px;
  transition: background 0.15s;
}
.catch-confirm-btn:hover { background: rgba(var(--ui-color-rgb),0.15); }
.catch-confirm-btn:active { transform: scale(0.92); }

/* === 神秘蛋 === */
.egg-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.egg-big {
  width: 48px;
  height: 48px;
  object-fit: contain;
  animation: eggBob 1.2s ease-in-out infinite;
  transition: transform 0.2s;
}
.egg-big:hover { transform: scale(1.1); }

@keyframes eggBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.egg-text {
  font-size: 10px;
  color: var(--ui-color);
  font-weight: 700;
}

/* 道具收集 Q 弹动画（仅图标） */
@keyframes bagPop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.5); }
  60%  { transform: scale(0.85); }
  100% { transform: scale(1); }
}
.bag-icon.pop {
  animation: bagPop 0.4s ease-out;
}

/* === 背包 (下半) === */
.backpack-bar {
  flex-shrink: 0;
  padding: 6px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* 背包页码指示条*/
.bag-page-indicator {
  display: flex;
  align-items: stretch;
  gap: 4px;
  height: 2px;
  margin: -6px -10px 3px;
  flex-shrink: 0;
}
/* splash 落位动画期间：指示条隐藏，改回原 border-top 上边框线 */
.backpack-bar.splash-border-top {
  border-top: 2px solid var(--console-border);
}
.bag-page-indicator .seg-long {
  flex: 1;
  background: var(--console-border);
}
.bag-page-indicator .seg-page {
  width: 22px;
  background: var(--console-border);
  filter: brightness(0.92);
  transition: background 0.2s ease, filter 0.2s ease;
  cursor: pointer;
}
.bag-page-indicator .seg-page:hover {
  filter: brightness(1.15);
}
.bag-page-indicator .seg-page.on:hover {
  background: var(--ui-color);
}
.bag-page-indicator .seg-page.on {
  background: var(--ui-color);
  filter: brightness(1); /* 选中态原色显示 */
}

.backpack-items {
  display: flex;
  gap: 3px;
  align-items: center;
}

/* 背包翻页：每页占满剩余宽度，第二页默认隐藏（滚轮翻页由 main.js 切换） */
.bag-page {
  display: flex;
  flex: 1;
  gap: 3px;
  min-width: 0;
}
.bag-slot--empty { background: rgba(0,0,0,0.02); cursor: default; }
.bag-slot--empty:hover { background: rgba(0,0,0,0.02); }
.bag-slot--empty:active { transform: none; }

.bag-slot {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 2px 1px;
  height: 44px; /* 固定高度：骑行中 qty 缩成「下车」(9px) 也不改变槽高，两页高度保持一致 */
  border-radius: 4px;
  background: rgba(0,0,0,0.03);
  min-width: 0;
  cursor: pointer;
  transition: background 0.12s, transform 0.12s;
  user-select: none;
}
.bag-slot:hover { background: rgba(255,255,255,0.3); }
.bag-slot:active { transform: scale(0.92); }
.bag-slot.disabled { opacity: 0.45; cursor: default; background: rgba(0,0,0,0.06); }
.bag-slot.disabled:hover { background: rgba(0,0,0,0.06); }
.bag-slot.disabled:active { transform: none; }
.bag-slot.disabled .bag-icon { opacity: 0.6; }
.bag-slot.disabled .bag-qty { color: var(--color-muted); font-weight: 600; }
/* 夜间模式背包格子：黑底在暗背景上不可见，改浅色叠加 */
[data-theme="dark"] .bag-slot { background: var(--item-bg); }
[data-theme="dark"] .bag-slot:hover { background: rgba(255,255,255,0.2); }
[data-theme="dark"] .bag-slot.disabled,
[data-theme="dark"] .bag-slot.disabled:hover { background: rgba(0,0,0,0.3); }
[data-theme="dark"] .bag-slot--empty,
[data-theme="dark"] .bag-slot--empty:hover { background: transparent; }
/* 骑行中自行车槽：仍可点击下车 → 指针恢复、下车文字缩小 */
.bag-slot[data-item="bike"].disabled { cursor: pointer; }
.bag-slot[data-item="bike"].disabled .bag-qty { font-size: 9px; }

.bag-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  image-rendering: pixelated;
}

.bag-name {
  font-size: 7px;
  color: var(--color-muted);
  white-space: nowrap;
  line-height: 1;
}

.bag-qty {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
}

/* === 孵蛋器 === */
.incubator-row {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,0.04);
  border-radius: 6px;
  padding: 5px 4px;
  min-height: 34px;
  border: 1px solid var(--item-border);
}
.incubator-egg-slot {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(var(--ui-color-rgb),0.25);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.03);
  transition: border-color 0.2s;
  cursor: pointer;
}
.incubator-egg-slot.has-egg {
  border-color: var(--ui-color);
  border-width: 1px;
  border-style: solid;
  cursor: default;
}
.incubator-egg-slot img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  image-rendering: pixelated;
}
.incubator-egg-slot img.shake {
  animation: incubatorShake 0.8s ease-in-out infinite;
  transform-origin: bottom center;
}
/* 派遣进行中：无移动素材的图标上下跳动（跳幅 3px 不溢出容器，动画内已含水平翻转） */
.incubator-egg-slot img.dispatch-cell-icon.dispatch-bob {
  animation: dispatchBob 0.5s steps(1, end) infinite;
}
@keyframes dispatchBob {
  0%, 55%  { transform: translateY(3px) scaleX(-1); }
  58%, 68% { transform: translateY(0) scaleX(-1); }
  71%, 100% { transform: translateY(3px) scaleX(-1); }
}
/* 派遣进行中：使用移动帧素材向右行走（素材默认朝右，覆盖静态翻转；切帧循环，视觉约 22px） */
.incubator-egg-slot img.dispatch-cell-icon.dispatch-move {
  width: 32px;
  height: 32px;
  object-fit: none;
  object-position: 0px 0px;
  transform: scale(0.7);
  transform-origin: center;
  animation: none;
}
/* 派遣静态图标（待出发/完成/空槽放入）默认素材朝左，统一水平翻转朝右 */
.incubator-egg-slot img.dispatch-cell-icon {
  transform: scaleX(-1);
}
@keyframes incubatorShake {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}
.incubator-info {
  flex: 1;
  min-width: 0;
}
.incubator-name {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  color: var(--ui-color);
  font-weight: 600;
}
/* 名字/标题内嵌的来源徽章（闪光/污染/RGB），跟随文字并排显示；尺寸按各自字号适配 */
.incubator-name svg {
  width: 8px;
  height: 8px;
  margin-left: 2px;
  vertical-align: middle;
}
.berry-picker-title svg {
  width: 10px;
  height: 10px;
  margin-left: 3px;
  vertical-align: middle;
}
.incubator-progress-wrap {
  height: 10px;
  background: rgba(0,0,0,0.08);
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}
.incubator-progress-fill {
  height: 100%;
  background: var(--ui-color);
  border-radius: 5px;
  transition: width 0.3s linear;
}
/* 黄色加成段：随从减免的孵蛋里程。叠在绿色段右端之后，左端直角无缝衔接，右端圆角 */
.incubator-progress-boost {
  position: absolute;
  top: 0;
  height: 100%;
  background: rgba(240, 196, 60, 0.55);
  border-radius: 0 5px 5px 0;
  pointer-events: none;
  transition: left 0.3s linear;
}
/* 有黄色段时，绿色段右端改直角，避免两圆角相连 */
.incubator-progress-fill.has-boost {
  border-radius: 5px 0 0 5px;
}
.incubator-progress-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  color: #fff;
  font-weight: 700;
}
/* 夜间模式：wrap 底色 rgba(0,0,0,0.08) 在暗背景上不可见，改浅色底衬托填充段 */
[data-theme="dark"] .incubator-progress-wrap {
  background: var(--item-hover-bg);
}
/* 夜间模式：进度条文字用浅灰白，比纯白柔和且在绿色填充段上保持可读 */
[data-theme="dark"] .incubator-progress-text {
  color: var(--color-text);
}
.incubator-hatch-text {
  display: inline;
  font-size: 10px;
  font-weight: 700;
  color: var(--ui-color);
  cursor: pointer;
  padding: 2px 6px;
  border: 1px solid var(--ui-color);
  border-radius: 3px;
  user-select: none;
  transition: background 0.12s;
  white-space: nowrap;
}
.incubator-hatch-text:hover { background: rgba(var(--ui-color-rgb),0.12); }
.incubator-hatch-text:active { transform: scale(0.92); }

/* 锁定槽位中非下一个的解锁按钮：灰显禁用 */
.incubator-hatch-text.disabled {
  opacity: 0.35;
  cursor: default;
}
.incubator-hatch-text.disabled:hover { background: transparent; }
.incubator-hatch-text.disabled:active { transform: none; }

/* 锁定槽位 */
.incubator-row.locked { cursor: default; position: relative; }
.incubator-row.locked .incubator-hatch-text { margin-left: auto; margin-right: 4px; }
.incubator-hatch-text.hatched { margin-left: auto; margin-right: 4px; }
/* 派遣待出发槽位：上方配置/出发按钮，下方显示当前时长档位 */
.dispatch-launch-actions {
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
}
.dispatch-launch-time {
  text-align: center;
  font-size: 8px;
  color: var(--ui-color);
  opacity: 0.75;
  line-height: 1.3;
  margin-top: 1px;
}
/* 派遣页按钮收紧：仅缩小主列表内按钮，槽位尺寸与孵蛋器一致 */
#dispatchContent .incubator-row {
  padding: 4px 3px;
  gap: 4px;
}
#dispatchContent .incubator-hatch-text {
  font-size: 9px;
  padding: 1px 4px;
}
.incubator-lock-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 16px;
  color: var(--color-muted);
}
.incubator-lock-info {
  flex: 1;
  min-width: 0;
  font-size: 10px;
  color: var(--ui-color);
  line-height: 1.4;
  font-weight: 600;
}
.incubator-lock-cost {
  font-weight: 700;
  color: var(--ui-color);
  font-size: 9px;
}

/* 孵蛋器头部：右上角"孵蛋记录"按钮（列表主视图显示，选蛋/记录页隐藏） */
.incubator-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  min-height: 16px;
}
.incubator-grid {
  flex: 1;
  color: var(--ui-color);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  align-content: start;
}
/* 孵蛋器主列表需要外层滚动（记录模式由 .list-scroll 接管滚动） */
#incubatorView { overflow-y: auto; }
.incubator-log-btn {
  margin-left: auto;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  font-family: inherit;
  color: var(--ui-color);
  background: rgba(0,0,0,0.04);
  border: 1px solid var(--item-border);
  border-radius: 5px;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s;
}
.incubator-log-btn:hover { background: rgba(var(--ui-color-rgb),0.12); }
.incubator-log-btn.disabled { opacity: 0.4; pointer-events: none; cursor: default; }

/* 宝可梦蛋列表（挑蛋入槽） */
.incubator-egg-list {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.incubator-egg-list-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 2px 6px;
  font-size: 12px;
  font-weight: 700;
}

/* === 派遣（主列表复用孵蛋器布局）=== */
#dispatchView { overflow-y: auto; }

/* 时长选择面板（复用 berry-picker 底栏；配色对齐游戏内对话框：米黄底 + 绿字，按钮浅绿底绿边） */
.dispatch-dur-panel {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dispatch-dur-info {
  padding: 2px 8px 0;
  font-size: 10px;
  font-weight: 600;
  color: var(--ui-color);
  text-align: center;
  opacity: 0.85;
}
.dispatch-dur-row {
  display: flex;
  gap: 4px;
  padding: 4px;
}
.dispatch-dur-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 4px 0;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--ui-color);
  background: var(--screen-bg);
  border: 2px solid var(--ui-color);
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  opacity: 0.8;
  transition: opacity 0.12s, transform 0.06s;
}
.dispatch-dur-btn:hover { opacity: 1; }
.dispatch-dur-btn:active { transform: translateY(2px); }
.dispatch-dur-btn em { font-style: normal; font-weight: 700; }
.dispatch-dur-btn.active {
  opacity: 1;
  background: var(--ui-color);
  color: var(--screen-bg);
}
.dispatch-dur-preview {
  padding: 0 8px;
  font-size: 10px;
  font-weight: 600;
  color: var(--ui-color);
  text-align: center;
  min-height: 13px;
}
.dispatch-dur-start {
  margin: 2px 8px 4px;
  padding: 6px 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--ui-color);
  background: var(--screen-bg);
  border: 2px solid var(--ui-color);
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.12s, transform 0.06s;
}
.dispatch-dur-start:hover { opacity: 1; }
.dispatch-dur-start:active { transform: translateY(2px); }

/* 仓库蛋条目行：蛋图标（icon-egg 随主题色） */
.roster-icon-egg {
  width: 22px;
  height: 22px;
  color: var(--ui-color);
}

.stats-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 4px 8px 0;
  font-size: 9px;
  color: var(--ui-color);
  opacity: 0.7;
  user-select: none;
}
.stats-bar span { cursor: pointer; }
.stats-bar span:hover { color: var(--ui-color-dark); }
.stats-bar span:last-child { text-align: right; }
#statProgress { grid-column: 1; }
#statAutoStatus { grid-column: 2; }
#statTime { grid-column: 3; }

#statDropHint { grid-column: 2; }
.stat-drop-hint { display: inline-flex; align-items: center; }

.stat-auto-status { display: inline-flex; align-items: center; gap: 4px; }
.stat-auto-bar-wrap {
  display: inline-block;
  width: 40px;
  height: 4px;
  background: #8BAC8F;
  border: 1px solid var(--ui-color);
  border-radius: 2px;
  vertical-align: middle;
  overflow: hidden;
}
.stat-auto-bar-fill {
  display: none;
  height: 100%;
  width: 100%;
  background: var(--ui-color);
  border-radius: 1px;
  transition: width 0.2s linear;
}

/* === 加载失败 === */
.load-error {
  font-size: 10px;
  color: #8b3a3a;
}

/* ==================== 捕捉动画舞台 ==================== */
.catch-stage {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 20;
  display: none;
}
.catch-stage.active { display: block; }

.catch-stage .anim-ball {
  position: absolute;
  width: 40px;
  height: 40px;
  object-fit: contain;
  image-rendering: pixelated;
  z-index: 3;
  opacity: 0;
}
.catch-stage .anim-ball.visible { opacity: 1; }

/* 丢球角色（左下角，不被文字框遮住，默认显最后一帧） */
.anim-throw-char {
  position: absolute;
  bottom: 52px;
  left: 0;
  width: 64px;
  height: 64px;
  overflow: hidden;
  z-index: 25;
  pointer-events: none;
  user-select: none;
}
.anim-throw-char-img {
  display: block;
  width: 64px;
  height: 256px;
  image-rendering: pixelated;
  margin-top: -192px;
}
.anim-throw-char.throwing .anim-throw-char-img {
  animation: throwPose 0.6s forwards;
  margin-top: 0;
}
@keyframes throwPose {
  0%     { margin-top: 0; }
  24.99% { margin-top: 0; }
  25%    { margin-top: -64px; }
  49.99% { margin-top: -64px; }
  50%    { margin-top: -128px; }
  74.99% { margin-top: -128px; }
  75%    { margin-top: -192px; }
  100%   { margin-top: -192px; }
}

@keyframes ballSwingRight {
  0%   { transform: rotate(0deg); }
  30%  { transform: rotate(22deg); }
  55%  { transform: rotate(-5deg); }
  80%  { transform: rotate(2deg); }
  100% { transform: rotate(0deg); }
}

@keyframes ballSwingLeft {
  0%   { transform: rotate(0deg); }
  30%  { transform: rotate(-22deg); }
  55%  { transform: rotate(5deg); }
  80%  { transform: rotate(-2deg); }
  100% { transform: rotate(0deg); }
}

@keyframes ballBounce {
  0%   { transform: translateY(0); }
  20%  { transform: translateY(-40px); }
  40%  { transform: translateY(-18px); }
  60%  { transform: translateY(-6px); }
  80%  { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}

@keyframes lockFeedback {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}

@keyframes starFloat {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-50px) scale(0.2); }
}

/* 蛋摇晃动画 — 底部中心为支点 */
.egg-shake {
  animation: eggShake 0.6s ease-in-out 3;
  transform-origin: bottom center;
}
@keyframes eggShake {
  0%, 100% { transform: translateX(-50%) rotate(0deg); }
  25% { transform: translateX(-50%) rotate(-5deg); }
  50% { transform: translateX(-50%) rotate(5deg); }
  75% { transform: translateX(-50%) rotate(-3deg); }
}

/* 孵化出现动画：从蛋中心放大 */
.hatch-appear {
  transition: transform 0.35s ease-out, opacity 0.25s ease-out;
}

/* === 孵化全部（批量孵蛋独立页） === */
#hatchAllView {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
/* 孵化全部网格：固定 4 列小格子，8 个必然 2 行×4；数量不足时整体水平居中。
   列宽用 1fr 按可用宽度平分（不用固定 vw，避免宽屏/缩放下列总宽超出 screen 溢出容器） */
.hatch-all-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-content: center;
  gap: 6px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 8px 12px;
  box-sizing: border-box;
}
.hatch-all-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 92px;
}
.hatch-all-stage {
  position: relative;
  width: 100%;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hatch-all-stage .hatch-all-egg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  image-rendering: pixelated;
}
.hatch-all-stage img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: calc(100% - 2px);
  max-height: 100%;
  width: auto;
  height: auto;
  image-rendering: pixelated;
}
.hatch-all-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  height: 12px;
  font-size: 9px;
  font-weight: 700;
  color: var(--ui-color);
  max-width: 100%;
}
/* 名字文本单独包 span：长名省略号只在文字上生效，右侧图标保持居中不半截 */
.hatch-all-name > span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}

.star-particle {
  position: absolute;
  z-index: 5;
  pointer-events: none;
}
.star-particle::after {
  content: '✦';
  font-size: 14px;
  color: #ffd700;
  display: block;
  line-height: 1;
  filter: drop-shadow(0 0 2px rgba(255,215,0,0.6));
}

/* 闪光出场星星粒子 */
.shiny-sparkle {
  position: absolute;
  pointer-events: none;
  z-index: 6;
}
.shiny-sparkle::after {
  content: '✦';
  font-size: 9px;
  color: #ffffff;
  display: block;
  line-height: 1;
  filter: drop-shadow(0 0 3px rgba(255,255,255,0.9));
}
.shiny-sparkle.sm::after { font-size: 6px; }

.catch-msg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px;
  font-weight: 700;
  color: var(--ui-color);
  white-space: nowrap;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
}
.catch-msg.show {
  opacity: 1;
  transition: opacity 0.3s;
}

/* ===== 统计页面 ===== */
.stat-inner {
  padding: 6px 8px;
}
.stat-section {
  font-weight: 700;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--ui-color);
  margin-top: 0;
}
.stat-section + .stat-section {
  margin-top: 6px;
}
.stat-row {
  display: flex;
  justify-content: space-between;
}
.stat-row span:last-child {
  font-weight: 600;
}
.stat-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 6px;
}
.stat-table th,
.stat-table td {
  padding: 1px 4px;
  text-align: right;
  font-size: 11px;
  border: 1px solid rgba(var(--ui-color-rgb), 0.22);
}
.stat-table th:first-child,
.stat-table td:first-child {
  text-align: left;
}
.stat-table th {
  font-weight: 600;
  font-size: 10px;
  background: rgba(var(--ui-color-rgb), 0.08);
}
.stat-table td:last-child {
  font-weight: 600;
}

/* ===== 成就系统 ===== */
.ach-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--ui-color);
}
.ach-summary {
  font-size: 10px;
  font-weight: 400;
  opacity: 0.7;
}
.ach-item {
  border: 1px solid rgba(var(--ui-color-rgb), 0.25);
  padding: 4px 6px;
  margin-bottom: 4px;
}
.ach-top {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
}
.ach-name {
  font-weight: 700;
}
.ach-prog {
  font-size: 10px;
  opacity: 0.85;
}
.ach-bar {
  height: 6px;
  margin: 3px 0;
  background: rgba(var(--ui-color-rgb), 0.12);
  border: 1px solid rgba(var(--ui-color-rgb), 0.25);
}
.ach-bar-fill {
  height: 100%;
  background: var(--ui-color);
  transition: width 0.3s;
}
.ach-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}
.ach-desc {
  font-size: 10px;
  opacity: 0.65;
}
.ach-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border: 1px solid rgba(var(--ui-color-rgb), 0.35);
  border-radius: 3px;
  background: rgba(var(--ui-color-rgb), 0.1);
  color: var(--ui-color);
  font-size: 9px;
  cursor: pointer;
  transition: background 0.12s;
}
.ach-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.ach-reward {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 9px;
  opacity: 0.9;
}
.ach-btn:hover:not(:disabled) { background: rgba(var(--ui-color-rgb), 0.25); }
.ach-btn:active:not(:disabled) { transform: scale(0.95); }
.ach-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.ach-btn-ready {
  border-color: var(--ui-color);
  background: rgba(var(--ui-color-rgb), 0.22);
  font-weight: 700;
}

/* ===== 关闭确认框（右上角叉 / 任务栏关闭时弹出） ===== */
#quitDialog {
  position: absolute;
  inset: 0;
  z-index: 99;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.25);
}
#quitDialog.open { display: flex; }

#quitDialog .dialog-box,
#gpsDestDialog .dialog-box {
  position: relative;
  background: var(--console-body);
  border: 2px solid var(--ui-color);
  border-radius: 6px;
  text-align: center;
  padding: 12px 16px;
  min-width: 160px;
}
#quitDialog .dialog-title,
#gpsDestDialog .dialog-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--ui-color);
  text-align: center;
  margin-bottom: 10px;
}
/* 右上角关闭叉 */
#quitDialog .quit-close,
#gpsDestDialog .quit-close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ui-color);
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.12s;
}
#quitDialog .quit-close:hover,
#gpsDestDialog .quit-close:hover { opacity: 1; }
#quitDialog .quit-close svg,
#gpsDestDialog .quit-close svg { width: 11px; height: 11px; fill: currentColor; }
#quitDialog .dialog-opt,
#gpsDestDialog .dialog-opt {
  display: block;
  width: fit-content;
  margin: 0 auto 8px;
  padding: 7px 16px;
  border: 2px solid var(--ui-color);
  border-radius: 6px;
  background: var(--screen-bg);
  opacity: 0.8;
  color: var(--ui-color);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s, transform 0.06s;
}
#quitDialog .dialog-opt:last-of-type,
#gpsDestDialog .dialog-opt:last-of-type { margin-bottom: 0; }
#quitDialog .dialog-opt:hover,
#gpsDestDialog .dialog-opt:hover { opacity: 1; }
#quitDialog .dialog-opt:active,
#gpsDestDialog .dialog-opt:active { transform: translateY(2px); }

/* ===== 导航目的地选择框（点击底部"点击地图选择目的地"弹出） ===== */
#gpsDestDialog {
  position: absolute;
  inset: 0;
  z-index: 99;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.25);
}
#gpsDestDialog.open { display: flex; }
#gpsDestDialog .dialog-box { min-width: 210px; }
.gps-dest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}
.gps-dest-events {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.gps-dest-btn {
  padding: 7px 4px;
  border: 2px solid var(--ui-color);
  border-radius: 6px;
  background: var(--screen-bg);
  opacity: 0.8;
  color: var(--ui-color);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s, transform 0.06s;
}
.gps-dest-btn:hover { opacity: 1; }
.gps-dest-btn:active { transform: translateY(2px); }
/* 底部"点击地图选择目的地"提示可点击（父容器 pointer-events:none，需单独放开） */
.gps-pick-dest {
  pointer-events: auto;
  cursor: pointer;
}
.gps-pick-dest:hover { color: var(--ui-color-dark); }

/* ===== 图鉴列表 ===== */
/* 列表型页面容器：图鉴/仓库/饲育屋放入页共用的边距、字号、颜色 */
.view-list {
  width: 100%;
  align-self: stretch;
  height: 100%;
  font-size: 11px;
  color: var(--ui-color);
  user-select: none;
  padding: 0 6px 4px;
  box-sizing: border-box;
  overflow: hidden;
}
.log-back-inline {
  cursor: pointer;
  font-weight: 600;
  line-height: 1.6;
  padding: 2px 0;
  user-select: none;
  color: inherit;
}
.log-back-inline:hover { opacity: 0.7; }
.log-back-inline svg { color: inherit; }
.pokedex-progress {
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  padding: 0 0 2px;
  margin: 2px;
  line-height: 1.6;
}
.pokedex-close {
  cursor: pointer;
  opacity: 0.5;
}
.pokedex-close:hover { opacity: 1; }

/* === 手机主页（主菜单） === */
#phoneView {
  width: 100%;
  align-self: stretch;
  height: 100%;
}
.phone-clock {
  text-align: center;
  color: var(--ui-color);
  padding: 2px 0 6px;
  user-select: none;
  transition: padding 0.3s ease;
}
.phone-clock .date {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  opacity: 0.8;
  transition: font-size 0.3s ease;
}
.phone-clock .time {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  transition: font-size 0.3s ease, line-height 0.3s ease;
}
/* 有音乐时压缩时间区域（上挤），app 图标位置保持不动 */
#phoneView.has-music .phone-clock { padding: 0 0 2px; }
#phoneView.has-music .phone-clock .date { font-size: 9px; }
#phoneView.has-music .phone-clock .time { font-size: 17px; line-height: 1.2; }
#phoneContent { display: flex; flex-direction: column; min-height: 0; }
/* 手机 App 分页：多页横排，scroll-snap 原生翻页（滚动条隐藏） */
.phone-pages {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.phone-pages::-webkit-scrollbar { display: none; }
.phone-page {
  flex-shrink: 0;
  width: 100%;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px 4px;
  justify-items: center;
  align-content: center;
  padding: 2px 2px 4px;
}
/* 页码指示点 */
.phone-dots {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 3px 0 1px;
}
.phone-dots .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(var(--ui-color-rgb), 0.28);
  cursor: pointer;
  transition: background 0.15s;
}
.phone-dots .dot.active { background: var(--ui-color); }
/* 音乐栏平滑展开/收起：max-height+opacity 过渡，与时钟放大/压缩互补，过渡期间总高度恒定 */
.phone-music {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  gap: 5px;
  padding: 0 0 2px;
  color: var(--ui-color);
  font-size: 11px;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  user-select: none;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}
#phoneView.has-music .phone-music {
  max-height: 22px;
  opacity: 0.7;
}
.phone-music-title {
  max-width: 100px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
}
.phone-music-title > span {
  display: inline-block;
  white-space: nowrap;
  padding-right: 10px;
}
/* 歌名超出宽度时滚动显示（先停 1.2s，再滚到末尾停 1.2s，回到开头） */
.phone-music-title.scrolling > span {
  animation: marquee 8s linear infinite;
}
@keyframes marquee {
  0%, 15%   { transform: translateX(0); }
  55%, 85%  { transform: translateX(var(--marquee, -60px)); }
  100%      { transform: translateX(0); }
}
/* 波形：三条小柱，地区曲发声时跳动，暂停/静音时静止 */
.eq {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 10px;
}
.eq i {
  width: 2px;
  height: 4px;
  background: currentColor;
  border-radius: 1px;
  animation: eqJump 0.8s ease-in-out infinite;
  animation-play-state: paused;
}
.eq.on i { animation-play-state: running; }
.eq i:nth-child(2) { animation-delay: 0.2s; }
.eq i:nth-child(3) { animation-delay: 0.4s; }
@keyframes eqJump {
  0%, 100% { height: 3px; }
  50% { height: 10px; }
}
.phone-app {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  user-select: none;
  transition: transform 0.1s ease, opacity 0.15s ease;
  opacity: 0.85;
}
.phone-app:hover { opacity: 1; }
.phone-app:active { transform: scale(0.92); }
.phone-app-icon {
  position: relative;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--screen-bg-dark);
  border-radius: 9px;
  color: #fff;
}
.phone-app-icon svg { width: 22px; height: 22px; display: block; }
[data-theme="dark"] .phone-app-icon { color: var(--color-text); }
.phone-app-name {
  font-size: 10px;
  font-weight: 700;
}
/* 手机主页应用红点：孵蛋完成 / 有可交换宝可梦 / 有干涸树果时点亮 */
.phone-app-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 9px;
  height: 9px;
  background: #e74c3c;
  border: 1.5px solid var(--screen-bg);
  border-radius: 50%;
  z-index: 2;
}

/* === 树果农场 === */
.berry-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
/* 田地：terrain tileset 绘制的 10×9 瓦片地块（24px/瓦片 → 240×216，两行耕地），树果精灵图绝对定位在上层 */
.berry-field {
  position: relative;
  width: 240px;
  height: 214px;
  margin: 0 auto;
  overflow: hidden;
}
.berry-field-canvas {
  display: block;
  width: 240px;
  height: 216px;
  /* 顶部 2px 越出容器被裁 */
  margin-top: -2px;
  image-rendering: pixelated;
}
/* 调试叠加层：只在本机 ?berrydebug=1 时由 JS 插入，画出碰撞盒与路线 */
.berry-debug {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 240px;
  height: 216px;
  pointer-events: none;
  z-index: 12;
}
.berry-plot {
  position: absolute;
  display: flex;
  /* 底对齐：幼苗（32px）与树果（64px）都锚在田地底部，处于同一地面线 */
  align-items: flex-end;
  justify-content: center;
  cursor: pointer;
}
.berry-plot.stage-ripe { cursor: grab; }
.berry-plot.stage-ripe:active { cursor: grabbing; }
.berry-plot:active { transform: scale(0.96); }
/* 层级：整体压缩到对话框（.berry-picker z-index:11）之下，保持"越靠下越在上层"——
   树果在渲染时内联 z（上行 7 / 下行 9），帮手 z 由 helperZ 分段（树行前 10 / 树行与过道 8）；
   因此帮手穿过两排树之间的过道时会被下行（近处）树遮住，回到底部时则遮住所有树 */
.berry-plot-add {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  opacity: 0.55;
}
.berry-frame {
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}
@keyframes berry-frames {
  from { background-position: var(--bfrom, 0) 0; }
  to   { background-position: var(--bto, 0) 0; }
}
/* 顶部生长进度条：悬停植物时显示当前生长时间点 */
.berry-progress {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  z-index: 6;
  pointer-events: none;
}
.berry-progress-track {
  width: 100%;
  height: 5px;
  background: var(--screen-bg-light);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--screen-bg-dark);
  position: relative;
}
.berry-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--screen-bg-dark);
  border-radius: 3px;
  transition: width 1s linear;
}
/* 黄色加成段：随从 berry 类加速成熟省下的进度。叠在绿色段右端之后，
   左端直角（与绿色段无缝衔接），右端圆角（对齐容器） */
.berry-progress-boost {
  position: absolute;
  top: 0;
  height: 100%;
  background: rgba(240, 196, 60, 0.55);
  border-radius: 0 3px 3px 0;
  pointer-events: none;
  transition: left 1s linear;
}
/* 有黄色段时，绿色段右端改直角，避免两圆角相连 */
.berry-progress-fill.has-boost {
  border-radius: 3px 0 0 3px;
}
.berry-progress-head {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 100%;
  font-size: 9px;
  font-weight: 700;
  color: var(--ui-color);
  white-space: nowrap;
}
.berry-progress-state { text-align: left; }
.berry-progress-time  { text-align: center; }
.berry-progress-right { text-align: right; }
/* 夜间模式：fill 沿用 screen-bg-dark 与 track 的 screen-bg-light 几乎同色，
   改用主题亮绿填充，与底色拉开对比 */
[data-theme="dark"] .berry-progress-fill {
  background: var(--ui-color);
}

/* 浇水动画：喷壶在树头上方，向左倾斜一下后淡出 */
.berry-spray {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 4px);
  width: 30px;
  height: 30px;
  object-fit: contain;
  pointer-events: none;
  image-rendering: pixelated;
  z-index: 7;
  animation: berry-spray 0.8s ease-out forwards;
}
@keyframes berry-spray {
  0%   { opacity: 0; transform: translate(-50%, 6px) rotate(0deg); }
  20%  { opacity: 1; transform: translate(-50%, 0)   rotate(-14deg); }
  55%  { opacity: 1; transform: translate(-50%, -2px) rotate(-20deg); }
  100% { opacity: 0; transform: translate(-50%, -6px) rotate(-30deg); }
}

/* 浇水水滴粒子：正方形像素水滴，从喷壶处撒落到植物上，随机横向偏移 */
.berry-drop {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 2px);
  border-radius: 0;
  background: #9fd8f5;
  box-shadow: 1px 0 0 #7ab8d8, 0 1px 0 #7ab8d8, 0 0 0 1px #7ab8d8; /* 像素描边，贴近 GBA 风格 */
  pointer-events: none;
  image-rendering: pixelated;
  z-index: 7;
  animation: berry-drop 0.65s steps(5, end) var(--delay, 0s) forwards;
}
@keyframes berry-drop {
  0%   { opacity: 0; transform: translate(calc(-50% - 6px), 4px) translate(0, 0); }
  15%  { opacity: 0.9; }
  100% { opacity: 0; transform: translate(calc(-50% - 6px), 20px) translate(var(--dx, 0), 0); }
}

/* 收获动效：树果图标从树冠飞向左上角库存箱；起点/终点由 JS 内联 left/top 指定，transition 过渡 */
.berry-fly {
  position: absolute;
  width: 14px;
  height: 14px;
  object-fit: contain;
  pointer-events: none;
  image-rendering: pixelated;
  z-index: 10;
}

/* 选种子：底部吸底面板，选项水平一行 */
.berry-picker {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  transform: none;
  z-index: 11;
  background: var(--console-body);
  border-radius: 8px 8px 0 0;
  color: var(--color-text);
  padding:4px 4px 4px 0;
  border: 2px solid var(--screen-bg-dark);
  animation: berry-picker-up 0.22s ease-out;
}
@keyframes berry-picker-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.berry-picker-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 0 0;
}
.berry-picker-title {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--ui-color-dark);
}
.berry-picker-x {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 11px;
  line-height: 1;
  padding: 2px 3px;
  color: var(--ui-color);
  cursor: pointer;
}
.berry-picker-x:hover { opacity: 0.7; }
.berry-picker-x:active { opacity: 0.5; }
.berry-picker-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
.berry-pick-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 0;
  cursor: pointer;
  transition: transform 0.12s;
}
.berry-pick-opt:active { transform: scale(0.94); }
.berry-pick-opt img {
  width: 26px;
  height: 26px;
  image-rendering: pixelated;
}

.berry-picker-note {
  padding: 3px 6px 2px;
  font-size: 10px;
  font-weight: 700;
  color: var(--ui-color);
  text-align: center;
}
.berry-pick-opt.no-candy {
  opacity: 0.35;
  cursor: default;
}
.berry-pick-opt.no-candy:active { transform: none; }

/* === 田地角落图标（库存箱 / 告示牌） === */
.berry-box-sign {
  position: absolute;
  top: 40px;
  left: 15px;
  width: 25px;
  height: 25px;
  object-fit: contain;
  image-rendering: pixelated;
  cursor: pointer;
  z-index: 8;
}
.berry-box-sign:hover { transform: scale(1.08); }
.berry-box-sign:active { transform: scale(0.92); }
.berry-board-sign {
  position: absolute;
  top: 35px;
  right: 10px;
  width: 30px;
  height: 30px;
  object-fit: contain;
  image-rendering: pixelated;
  cursor: pointer;
  z-index: 8;
}
.berry-board-sign:hover { transform: scale(1.08); }
.berry-board-sign:active { transform: scale(0.92); }

/* 告示牌弹窗：整体增高，分区内部滚动，避免委托条数翻倍后溢出 */
.berry-board {
  max-height: 82%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.berry-board-sections {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 4px;
}
.berry-board-section-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--ui-color-dark);
  padding: 3px 6px 2px;
  border-bottom: 1px dashed rgba(var(--ui-color-rgb), 0.35);
  margin: 2px 0 2px;
}
.board-stock {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
  padding: 2px 6px 4px;
}
.board-stock-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text);
}
.board-stock-item img {
  width: 22px;
  height: 22px;
  image-rendering: pixelated;
}
.board-stock-count {
  font-size: 9px;
  font-weight: 700;
  color: var(--ui-color);
  line-height: 1;
}
.board-demand {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text);
}
.board-demand img {
  width: 22px;
  height: 22px;
  image-rendering: pixelated;
}
.board-demand.claimed img,
.board-demand.claimed .board-demand-name,
.board-demand.claimed .board-demand-qty,
.board-demand.claimed .board-demand-candy {
  opacity: 0.5;
}
.board-demand.claimed .board-demand-name,
.board-demand.claimed .board-demand-qty,
.board-demand.claimed .board-demand-candy {
  text-decoration: line-through;
}
.board-demand-name { width: 44px; }
.board-demand-qty { flex: 1; font-size: 10px; color: var(--ui-color); font-weight: 700; }
.board-demand-candy { white-space: nowrap; font-size: 9px; color: var(--ui-color); }
.board-trade {
  min-width: 52px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--ui-color-dark);
  border: 1px solid var(--ui-color);
  border-radius: 3px;
  padding: 2px 6px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.board-trade:hover { background: rgba(var(--ui-color-rgb), 0.12); }
/* 锁定（库存不足）/已兑换按钮不响应点击缩放效果 */
.board-trade:not(.locked):not(.done):active { transform: scale(0.94); }
.board-trade.locked {
  opacity: 0.4;
  cursor: default;
}
.board-trade.locked:hover { background: none; }
.board-trade.done {
  opacity: 0.4;
  cursor: default;
  border-style: dashed;
}
.board-trade.done:hover { background: none; }

/* === 招募帮手面板（告示牌第二分区） === */
.berry-helper-panel { padding: 3px 6px 6px; }
.helper-head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.helper-avatar {
  width: 34px;
  height: 34px;
  image-rendering: pixelated;
}
.helper-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.helper-name {
  font-size: 11px;
  font-weight: 800;
  color: var(--color-text);
}
.helper-desc {
  font-size: 9px;
  color: var(--ui-color);
}
.helper-remain {
  font-size: 10px;
  color: var(--ui-color-dark);
  white-space: nowrap;
}
/* 休息冷却状态：头像去饱和 + 整体弱化，状态文字用「休息中」 */
.berry-helper-panel.resting { opacity: 0.75; }
.berry-helper-panel.resting .helper-avatar { filter: grayscale(1); }
.berry-helper-panel.resting .helper-desc { color: var(--color-muted); }
.berry-helper-panel.resting .helper-remain { color: var(--color-muted); }
/* 招募/状态行：空闲态为「− 时长 ＋ 价格 招募」，服务中/休息中为剩余时间，同一位置紧凑布局 */
.helper-hirebar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
  min-height: 22px;
}
.helper-hirebar .helper-remain { flex: 1; }
.helper-hirebar .ball-check {
  white-space: nowrap;
  font-size: 11px;
  line-height: 1.5;
  margin-left: auto; /* 固定贴到右侧 */
}
.helper-hirebar .ball-check.on {
  font-weight: 400; /* 自动种植选框不加粗（全局 .ball-check.on 的加粗仅用于设置页） */
}
/* 头像栏右侧的加减号+ 时长 */
.helper-stepbar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.helper-step-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.helper-step {
  width: 15px;
  text-align: center;
  font-size: 10px;
  line-height: 1.25;
  color: var(--ui-color);
  border: 1px solid var(--ui-color);
  border-radius: 2px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.helper-step:hover { background: rgba(var(--ui-color-rgb), 0.12); }
.helper-step.disabled {
  opacity: 0.4;
  cursor: default;
}
.helper-step.disabled:hover { background: none; }
.helper-stage {
  min-width: 24px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ui-color);
}
.helper-cost {
  flex: 1; /* 左下角糖果价格，把招募按钮推到右侧 */
  font-size: 9px;
  line-height: 1.5;
  color: var(--ui-color);
}
.helper-hire {
  min-width: 52px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--ui-color-dark);
  border: 1px solid var(--ui-color);
  border-radius: 3px;
  padding: 3px 6px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.helper-hire:hover { background: rgba(var(--ui-color-rgb), 0.12); }
.helper-hire:not(.locked):active { transform: scale(0.94); }
.helper-hire.locked { opacity: 0.4; cursor: default; }
.helper-hire.locked:hover { background: none; }
/* 收工按钮：开始工作后显示在头像栏右侧，点击立即结束服务 */
.helper-stop {
  min-width: 44px;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  color: var(--ui-color-dark);
  border: 1px solid var(--ui-color);
  border-radius: 3px;
  padding: 2px 5px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.helper-stop:hover { background: rgba(var(--ui-color-rgb), 0.12); }
.helper-stop:active { transform: scale(0.94); }

/* === 果园帮手角色（异性主角） === */
/* 待机游走：walk 素材 900% 横向拉伸，复用主界面步行帧动画 */
.berry-helper {
    position: absolute;
    z-index: 9;
  width: 32px;
  height: 44px;
  bottom: 10px;
  left: 104px;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
  transition: left 0.55s linear, bottom 0.55s linear;
}
.berry-helper.walk {
  background-size: 900% 100%;
  animation: brendanWalk 0.6s steps(1) infinite;
}
.berry-helper.flip { transform: scaleX(-1); }
/* 站立：walk 素材第 7 帧（侧面静止，翻转朝左），不原地踏步 */
.berry-helper.stand {
  background-size: 900% 100%;
  background-position: 75% 0;
  animation: none;
}
/* 走向田地：面朝上（背对视角），用 walk 素材第 2/3 帧（上走） */
.berry-helper.walk-up {
  background-size: 900% 100%;
  animation: helperWalkUp 0.6s step-end infinite;
}
/* 走回底部：面朝下（正对视角），用 walk 素材第 4/5 帧（下走） */
.berry-helper.walk-down {
  background-size: 900% 100%;
  animation: helperWalkDown 0.6s step-end infinite;
}
/* 浇水：water 素材（32px 宽、2 帧）2x 显示为 64px，帧宽 32px，动画切换到第 2 帧 */
.berry-helper.water {
  width: 32px;
  height: 42px;
  background-image: var(--helper-water);
  background-size: 64px 42px;
  transform: none;
  animation: helperWaterOnce 0.8s step-end forwards;
}
/* 播种：走到植物前，用 walk 素材第 8 帧（面朝上静止） */
.berry-helper.plant {
  background-size: 900% 100%;
  background-position: 87.5% 0;
  animation: none;
}
@keyframes helperWalkUp {
  0%   { background-position: 25% 0; }
  50%  { background-position: 37.5% 0; }
  100% { background-position: 25% 0; }
}
@keyframes helperWalkDown {
  0%   { background-position: 50% 0; }
  50%  { background-position: 62.5% 0; }
  100% { background-position: 50% 0; }
}
@keyframes helperWaterOnce {
  0%, 49.9%  { background-position: 0 0; }
  50%, 100%  { background-position: -32px 0; }
}

/* === 混合器=== */
.mixer-page-title {
  flex-shrink: 0;
  font-size: 18px;
  font-weight: 800;
  text-align: center;
  padding: 10px 0 4px;
}
/* 通用淡入：动画完成后由 JS 加 show 显示 */
.mixer-fade {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s;
}
.mixer-fade.show { opacity: 1; visibility: visible; }

.mixer-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  user-select: none;
  height: 100%;
}

.mixer-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  min-height: 0;
}
/* 首页演示舞台 */
.mixer-demo {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  pointer-events: none;
}
.mixer-demo-cube {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  image-rendering: pixelated;
  opacity: 0.95;
  filter: drop-shadow(0 4px 1px rgba(0, 0, 0, 0.4));
}
.mixer-demo-berry {
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  opacity: 0.95;
  pointer-events: none;
}
.mixer-demo-berry img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
}
/* 配方选择（页内联） */
.mixer-pick-item {
  position: relative;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--item-border);
  border-radius: 6px;
  padding: 3px 1px 2px;
}
.mixer-pick-item.no-stock {
  opacity: 0.4;
  cursor: default;
}
.mixer-pick-item.selected {
  border-color: var(--ui-color);
  background: rgba(255, 255, 255, 0.25);
}
/* 已选树果图标行：网格下方一行展示当前配方 */
.mixer-pick-chosen {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 26px;
  padding: 0 6px;
}
.mixer-pick-chosen img {
  width: 24px;
  height: 24px;
  image-rendering: pixelated;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}
/* 混合小游戏（QTE 转盘） */
.mixer-qte-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mixer-qte-canvas {
  width: 180px;
  height: 180px;
  margin-top: 12px;
}
.mixer-cost {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 9px;
}
.mixer-cost img {
  width: 12px;
  height: 12px;
  image-rendering: pixelated;
}
.mixer-empty {
  font-size: 10px;
  text-align: center;
  padding: 12px 0;
  opacity: 0.6;
}

/* 配方树果图标 */
.block-bait-berry {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.block-bait-berry img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  image-rendering: pixelated;
}

/* 冷却页：复用结果页布局（标题在 cube 上方、小字在下方、底部按钮），仅方块/计时器为冷却页特有 */
.mixer-cool { align-items: center; text-align: center; }
.mixer-cool .bottom-dock { width: 100%; }
/* 混合器内底部按钮条：统一 min-height，与首页两行 dock 自然高度一致，方块位置不被 UI 影响 */
.mixer-wrap .bottom-dock { min-height: 42px; }
/* 方块预览：按配方颜色染色 */
.mixer-block-visual {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 1px rgba(0, 0, 0, 0.4));
}
/* 冷却页剩余里程：与结果页配方同位置（cube 正上方） */
.mixer-cool-timer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 84px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--ui-color-dark);
}
.mixer-cool-quality {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.2;
}
.mixer-cool-quality.perfect { color: #c54444; }
.mixer-cool-quality.great   { color: #ccba44; }
.mixer-cool-quality.good    { color: #346c44; }
.mixer-cool-quality.fair    { color: #2980b9; }
.mixer-cool-quality.poor    { color: #7f8c8d; }

/* 游戏页 */
#mixerContent {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.mixer-stage {
  position: relative;
  flex: 1;
  min-height: 240px;
  border-radius: 8px;
  background: var(--item-bg);
  border: 1px solid rgba(0, 0, 0, 0.08);
  overflow: hidden;
  cursor: pointer;
}
.mixer-falling-berry {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  will-change: transform;
  z-index: 5;
}
.mixer-falling-berry::after {
  content: '';
  position: absolute;
  left: -12px;
  top: -12px;
  right: -12px;
  bottom: -12px;
  border-radius: 50%;
  z-index: 1;
}
.mixer-falling-berry img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.35));
}
.mixer-falling-berry.landed {
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3));
  z-index: 4;
}
.mixer-falling-berry.miss {
  /* 只淡出；transform 由 inline 定位，动画里动 scale 会覆盖定位 */
  animation: berryMiss 0.22s ease-in forwards;
}
@keyframes berryMiss {
  to { opacity: 0; }
}

/* 舞台左上角已收集树果 */
.mixer-collected {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 130px;
}
.mixer-collected-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--ui-color-dark);
  border-radius: 3px;
  padding: 1px 5px;
  align-self: flex-start;
}
.mixer-collected-items {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  align-items: center;
}
.mixer-collected-berry {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
.mixer-collected-berry img {
  width: 17px;
  height: 17px;
  object-fit: contain;
  image-rendering: pixelated;
}
.mixer-collected .mixer-empty { padding: 0; font-size: 9px; }

/* 轮次提示（右上角） */
.mixer-round {
  position: absolute;
  top: 5px;
  right: 6px;
  z-index: 10;
  font-size: 9px;
  font-weight: 700;
  color: var(--ui-color-dark);
  border-radius: 3px;
  padding: 1px 5px;
}

/* 3-2-1 倒计时 */
.mixer-countdown {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  color: var(--ui-color);
  margin-bottom: 24px;
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
  user-select: none;
}
.mixer-countdown.show {
  animation: countdownPop 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes countdownPop {
  0%   { opacity: 0; transform: scale(0.6); }
  25%  { opacity: 1; transform: scale(1.15); }
  60%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.9); }
}

/* 结果页 */
.mixer-result { align-items: center; text-align: center; gap: 6px; justify-content: center; }
.mixer-result .mixer-page-title {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.mixer-result .mixer-page-title.show { opacity: 1; }
.mixer-result-title .perfect { color: #c54444; }
.mixer-result-title .great   { color: #cca544; }
.mixer-result-title .good    { color: #29b952; }
.mixer-result-title .fair    { color: #2980b9; }
.mixer-result-title .poor    { color: #7f8c8d; }
.mixer-result-stage {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  pointer-events: none;
  width: 100%;
}
/* 配方树果图标：cube 正上方 */
.mixer-result-berries {
  position: absolute;
  left: 0;
  right: 0;
  /* cube 高 44px 且 bottom:30px，其顶边在 74px，图标从 84px 起留 10px 间距 */
  bottom: 84px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s;
}
.mixer-result-berries.show { opacity: 1; visibility: visible; }
.mixer-result-berries img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  image-rendering: pixelated;
}
/* 空配方提示（舞台中央） */
.mixer-result-stage .mixer-empty {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
}
/* 小字：cube 正下方 */
.mixer-result-target {
  position: absolute;
  left: 0;
  right: 0;
  /* cube 底边 30px，小字在其下方 */
  bottom: 2px;
  padding: 0 10px;
  font-size: 10px;
  line-height: 1.5;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s;
}
.mixer-result-target.show { opacity: 0.85; visibility: visible; }
.mixer-result-actions {
  display: flex;
  align-items: stretch;
  width: 100%;
  margin: auto 0 0;
  flex-shrink: 0;
  min-height: 42px;
  border: 1px solid var(--item-border);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s;
}
.mixer-result-actions.show { opacity: 1; visibility: visible; }
.mixer-result-actions button {
  border: none;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  /* 与 bottom-dock 同高 */
  padding: 6px 8px;
  background: var(--screen-bg-light);
  color: var(--ui-color);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mixer-result-actions .mixer-action-claim { flex: 1; }
.mixer-result-actions .mixer-action-claim:hover { filter: brightness(1.05); }
.mixer-result-actions .mixer-action-giveup {
  flex-shrink: 0;
  width: 72px;
  /* 与领取按钮分割 */
  border-left: 1px solid var(--item-border);
  filter: brightness(0.95);
}
.mixer-result-actions .mixer-action-giveup:hover { filter: brightness(0.967); }

/* === GPS 模拟导航 === */
.gps-wrap { padding: 4px 14px 0; display: flex; flex-direction: column; gap: 0; height: 100%; user-select: none; }
.gps-minimap {
  position: relative;
  margin: 0 -14px;
  width: calc(100% + 28px);
  aspect-ratio: 320 / 176;
}
.gps-minimap-svg {
  display: block;
  width: 100%;
  height: 100%;
}
.gps-map-edge {
  stroke: rgba(var(--ui-color-rgb), 0.18);
  stroke-width: 2;
  stroke-linecap: round;
}
.gps-map-edge.active {
  stroke: var(--ui-color);
  stroke-width: 4;
}
.gps-map-node circle {
  fill: var(--screen-bg-light);
  stroke: var(--ui-color);
  stroke-width: 1.5;
}
.gps-map-node text {
  fill: var(--ui-color);
  font-size: 10px;
  font-weight: 700;
  paint-order: stroke;
  stroke: var(--screen-bg-light);
  stroke-width: 2px;
  stroke-linejoin: round;
}
.gps-map-node.current circle,
.gps-map-node.dest circle {
  fill: var(--ui-color);
  stroke: var(--ui-color-dark);
}
/* 骑行中锁定地图：节点/大量出没点不可点击，光标改默认 */
.gps-minimap.locked .gps-map-node,
.gps-minimap.locked .gps-mass-marker,
.gps-minimap.locked .gps-twist-marker {
  cursor: default;
}
.gps-map-marker {
  fill: var(--ui-color);
  stroke: var(--screen-bg-light);
  stroke-width: 2;
}
/* 定位阴影：滤镜挂在无 transform 的子元素上，避免与 rotate/scale 同挂一个元素导致 Chromium 阴影丢失。
   圆点阴影保持原样；水滴指针因整体被 scale(0.35)，局部偏移补偿 1/0.35≈2.9 使视觉与圆点一致 */
.gps-map-marker > circle {
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.18));
}
.gps-map-pin {
  filter: drop-shadow(0 3px 2px rgba(0,0,0,0.18));
}
/* 大量出没事件点标记：闪烁圆环 + 高亮点 + 标签 */
.gps-mass-ring {
  fill: none;
  stroke: var(--ui-color);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: gps-mass-pulse 1.6s ease-in-out infinite;
}
.gps-mass-dot {
  fill: var(--ui-color);
  stroke: var(--screen-bg-light);
  stroke-width: 1.5;
}
.gps-mass-label {
  fill: var(--ui-color);
  font-size: 9px;
  font-weight: 700;
  paint-order: stroke;
  stroke: var(--screen-bg-light);
  stroke-width: 2px;
  stroke-linejoin: round;
}
@keyframes gps-mass-pulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.5); opacity: 0.3; }
}
/* 时空扭曲事件点标记：紫色，样式语义与大量出没一致但独立配色 */
.gps-twist-ring {
  fill: none;
  stroke: #8c5290;
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: gps-mass-pulse 1.6s ease-in-out infinite;
}
.gps-twist-dot {
  fill: #8c5290;
  stroke: var(--screen-bg-light);
  stroke-width: 1.5;
}
.gps-twist-label {
  fill: #8c5290;
  font-size: 9px;
  font-weight: 700;
  paint-order: stroke;
  stroke: var(--screen-bg-light);
  stroke-width: 2px;
  stroke-linejoin: round;
}
/* 夜间模式地图扭曲标记：紫色降档，文字改柔和紫 */
[data-theme="dark"] .gps-twist-ring { stroke: #6d3a72; }
[data-theme="dark"] .gps-twist-dot { fill: #6d3a72; }
[data-theme="dark"] .gps-twist-label { fill: #8a5fa0; }
/* 漫游开关行：位于地图与底部信息栏之间的空隙区，靠左显示 */
.gps-roam-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 2px 4px;
}
.gps-roam-label {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.85;
}
/* 暂停提示：漫游开关右侧，移动暂停原因 */
.gps-roam-paused {
  font-size: 10px;
  font-weight: 700;
  color: var(--ui-color);
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  text-align: right;
}
/* 通用贴底按钮条：导航页 / 混合器共用；负 margin 抵消外层 padding 实现全宽贴底 */
/* 导航页内层 padding 左右 14px，dock 负 margin 同步扩大抵消，保持全宽贴底 */
.gps-wrap .bottom-dock { margin: auto -14px 0; }
.bottom-dock {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin: auto -3px 0;
  padding: 6px 8px;
  background: var(--screen-bg-light);
  border: 1px solid var(--item-border);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  color: var(--ui-color);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  height: 40px;
  transition: background 0.15s, transform 0.1s;
}
.bottom-dock:hover { filter: brightness(0.95); }
.bottom-dock:disabled { opacity: 0.45; pointer-events: none; }
.gps-bottom-cancel {
  position: absolute;
  left: 8px;
  top: 6px;
  bottom: 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 26px;
  color: var(--ui-color);
  cursor: pointer;
  transition: color 0.15s, transform 0.1s;
}
.gps-bottom-cancel:hover { color: var(--ui-color-dark); }
.gps-bottom-cancel:active { transform: scale(0.88); }
.gps-bottom-cancel svg { margin-top: 3px; }
.gps-bottom-cancel-text {
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
}
/* 信息区占满整框宽度，文字居中于整个底栏（不受左侧取消按钮影响） */
.gps-bottom-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  pointer-events: none;
}
.gps-bottom-line1 {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.gps-bottom-line2 {
  font-size: 9px;
  font-weight: 700;
  opacity: 0.55;
  white-space: nowrap;
}

/* ===== 地区悬赏 ===== */
.bounty-wrap {
  padding: 6px 2px;
  display: flex;
  flex-direction: column;
  user-select: none;
}
.bounty-title {
  font-weight: 700;
  font-size: 12px;
}
/* 标题行：地区名 + 导航图标，整体居中 */
.bounty-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: 3px;
}
.bounty-go {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--ui-color);
  cursor: pointer;
  transition: opacity 0.15s;
}
.bounty-go svg { display: block; fill: currentColor; }
.bounty-go:active { opacity: 0.6; transform: translateY(1px); }
.bounty-go:disabled {
  opacity: 0.35;
  cursor: default;
}
.bounty-head {
  font-size: 9px;
  opacity: 0.6;
  text-align: center;
  margin-bottom: 6px;
}
.bounty-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* 翻页布局：左右箭头 + 中间卡片 */
.bounty-pager {
  display: flex;
  align-items: stretch;
  gap: 5px;
}
/* 箭头：无背景无边框，仅图标 */
.bounty-arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  padding: 0;
  background: none;
  border: none;
  color: var(--ui-color);
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.bounty-arrow svg { display: block; }
/* back 图标水平翻转即右箭头 */
.bounty-arrow.next svg { transform: scaleX(-1); }
.bounty-arrow:hover { opacity: 0.6; }
.bounty-arrow:active { transform: scale(0.9); }
.bounty-page {
  flex: 1;
  min-width: 0;
}
/* 卡片固定宽高，翻页时布局不跳动 */
.bounty-card {
  box-sizing: border-box;
  width: 100%;
  height: 132px;
  display: flex;
  flex-direction: column;
  background: var(--screen-bg-light);
  border: 1px solid var(--item-border);
  border-radius: 8px;
  padding: 6px 8px;
}
/* 当前所在地区的悬赏卡片高亮描边 */
.bounty-card.cur { border-color: var(--ui-color); }
.bounty-line {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  min-height: 0;
}
.bounty-line + .bounty-line {
  border-top: 1px dashed rgba(var(--ui-color-rgb), 0.15);
}
.bounty-line.claimed .bounty-name,
.bounty-line.claimed .bounty-candy {
  text-decoration: line-through;
  opacity: 0.5;
}
.bounty-name {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bounty-candy {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0.8;
}
.bounty-claim {
  flex-shrink: 0;
  width: 44px;
  padding: 2px 0;
  box-sizing: border-box;
  border: 1px solid var(--ui-color-dark);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  background: var(--ui-color);
  color: var(--screen-bg);
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
}
.bounty-claim:active { transform: scale(0.95); }
.bounty-claim:not(.locked):not(.done):not(.pending):hover { filter: brightness(0.9); }
.bounty-claim.locked,
.bounty-claim.done,
.bounty-claim.pending {
  background: rgba(var(--ui-color-rgb), 0.12);
  color: var(--ui-color);
  border-color: transparent;
  cursor: pointer;
}
.bounty-claim.locked {
  opacity: 0.7;
}
.bounty-claim.done {
  font-weight: 400;
  opacity: 0.45;
}
/* 可提交：已捕获但需到达该地区，保留边框突出显示（区别于未捕获） */
.bounty-claim.pending {
  border-color: var(--ui-color-dark);
}
/* 悬赏忽略后的行淡化：右键该行可忽略/恢复（忽略后不再红点提醒） */
.bounty-line.ignored {
  opacity: 0.45;
}
.bounty-unknown {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  opacity: 0.55;
  min-height: 0;
}
.bounty-refresh {
  font-size: 9px;
  opacity: 0.55;
  text-align: center;
  margin-top: 6px;
}
/* 悬赏提示浮层：非当前地区点「可提交」时提示前往对应地区（固定于页面右上角，从右侧滑入淡入） */
.bounty-toast {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 40;
  color: var(--ui-color);
  background: rgba(0, 0, 0, 0.07);
  border-radius: 4px;
  font-size: 8px;
  font-weight: 600;
  padding: 4px 8px;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateX(30px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.bounty-toast.show {
  opacity: 0.7;
  visibility: visible;
  transform: translateX(0);
}

.pokedex-entry {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
  border-bottom: 1px solid rgba(var(--ui-color-rgb),0.08);
  cursor: pointer;
}
.pokedex-entry:hover { background: rgba(var(--ui-color-rgb),0.06); }
.pokedex-entry.disabled { cursor: default; opacity: 0.85; }
.pokedex-entry.disabled:hover { background: transparent; }
.pokedex-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 0 2px;
  font-size: 9px;
  font-weight: 700;
  border-bottom: 1px solid rgba(var(--ui-color-rgb),0.2);
  position: sticky;
  top: 0;
  background: transparent;
  z-index: 1;
}

/* 页面容器统一类：showView 设 display:flex 切换 */
.view-scroll {
  flex-direction: column;
  overflow-y: auto;
  align-self: stretch;
  width: 100%;
  height: 100%;
}
.view-scroll > * { padding: 4px 3px; }
.view-fixed {
  flex-direction: column;
  overflow: hidden;
  align-self: stretch;
  width: 100%;
  height: 100%;
}

/* 列表/详情滚动容器共用类：撑满剩余高度并纵向滚动 */
.list-scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  color: var(--ui-color);
}
/* 全局统一滚动条 */
*::-webkit-scrollbar { width: 4px; height: 4px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(var(--ui-color-rgb), 0.3); border-radius: 2px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(var(--ui-color-rgb), 0.55); }
/* 图鉴/仓库列表的父容器自带 6px 右内边距，用负外边距抵消，让滚动条紧贴屏幕右缘 */
#pokedexList.list-scroll,
#rosterList.list-scroll {
  margin-right: -6px;
  padding-right: 2px;
}
.pokedex-header [data-sort] {
  cursor: pointer;
  user-select: none;
  position: relative;
  white-space: nowrap;
}
.pokedex-header [data-sort]:hover {
  opacity: 1;
}
.pokedex-header [data-sort].sort-asc::after {
  content: '▲';
  font-size: 7px;
  margin-left: 1px;
  opacity: 0.8;
  vertical-align: middle;
}
.pokedex-header [data-sort].sort-desc::after {
  content: '▼';
  font-size: 7px;
  margin-left: 1px;
  opacity: 0.8;
  vertical-align: middle;
}

/* ---- 图鉴详情正方形容器 + 格子背景 ---- */
.poke-img-grid {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image:
    linear-gradient(45deg, rgba(0,0,0,0.06) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(0,0,0,0.06) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(0,0,0,0.06) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(0,0,0,0.06) 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
  cursor: pointer;
  border-radius: 2px;
}
.poke-img-in-grid {
  max-width: 54px;
  max-height: 54px;
  object-fit: contain;
  image-rendering: pixelated;
}

/* ---- 图鉴拼音搜索 ---- */
.pokedex-search {
  position: relative;
  margin-bottom: 4px;
}
.pokedex-search-row {
  display: flex;
  gap: 4px;
  align-items: center;
}
.pokedex-search-input-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}
.pokedex-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 2px 18px 2px 6px;
  font-size: 10px;
  border: 1px solid rgba(var(--ui-color-rgb),0.25);
  border-radius: 3px;
  background: rgba(var(--ui-color-rgb),0.06);
  color: var(--ui-color);
  outline: none;
  font-family: inherit;
}
.pokedex-search-input::placeholder {
  color: rgba(var(--ui-color-rgb),0.35);
}
.pokedex-search-input:focus {
  border-color: rgba(var(--ui-color-rgb),0.5);
  background: rgba(255,255,255,0.3);
}
.pokedex-search-clear {
  position: absolute;
  top: 50%;
  right: 3px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  padding: 0;
  border: none;
  background: transparent;
  color: rgba(var(--ui-color-rgb),0.45);
  cursor: pointer;
}
.pokedex-search-clear:hover { color: var(--ui-color); }
.pokedex-search-clear svg { width: 10px; height: 10px; display: block; }
.pokedex-region-select {
  position: relative;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  padding: 2px 6px;
  border: 1px solid rgba(var(--ui-color-rgb),0.25);
  border-radius: 3px;
  background: rgba(var(--ui-color-rgb),0.06);
  color: var(--ui-color);
  font-family: inherit;
  cursor: pointer;
  outline: none;
  flex-shrink: 0;
  user-select: none;
  white-space: nowrap;
}
.pokedex-region-select:hover {
  background-color: rgba(var(--ui-color-rgb),0.1);
}
.pokedex-region-select:focus,
.pokedex-region-select.open {
  border-color: rgba(var(--ui-color-rgb),0.5);
  background-color: rgba(255,255,255,0.3);
}
.region-arrow {
  flex-shrink: 0;
  color: var(--ui-color);
  opacity: 0.6;
  transition: transform 0.15s;
}
.pokedex-region-select.open .region-arrow {
  transform: rotate(180deg);
}
.region-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 100%;
  max-height: 160px;
  overflow-y: auto;
  background: var(--console-body);
  border: 1px solid rgba(var(--ui-color-rgb),0.2);
  border-radius: 0 0 3px 3px;
  z-index: 100;
}
.region-dropdown-item {
  padding: 2px 5px;
  font-size: 9px;
  color: var(--ui-color);
  cursor: pointer;
  border-bottom: 1px solid rgba(var(--ui-color-rgb),0.06);
}
.region-dropdown-item:last-child {
  border-bottom: none;
}
.region-dropdown-item:hover {
  background: rgba(var(--ui-color-rgb),0.08);
}
.region-dropdown-item.active {
  background: rgba(var(--ui-color-rgb),0.12);
  font-weight: 700;
}
/* 来源筛选三级菜单：一级=来源，二级=普通/神兽，三级=闪光（hover 逐级展开） */
#rosterFilterDropdown, #trainPickSrcFilterDropdown, #teamPickSrcFilterDropdown, #dispatchPickSrcFilterDropdown { max-height: none; overflow: visible; padding: 2px 0; }
/* 图鉴解锁/稀有度/闪光筛选三级菜单（同仓库样式） */
#pokedexStatusDropdown { max-height: none; overflow: visible; padding: 2px 0; }
.roster-filter-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 2px 5px;
  font-size: 9px;
  color: var(--ui-color);
  cursor: pointer;
  white-space: nowrap;
}
.roster-filter-item:hover {
  background: rgba(var(--ui-color-rgb),0.1);
}
.roster-filter-src,
.roster-filter-leaf {
  flex: 1;
  cursor: pointer;
}
/* 选中态：整行背景高亮（优先于 hover），与 .region-dropdown-item.active 视觉一致 */
.roster-filter-item:has(> .roster-filter-src.active),
.roster-filter-item:has(> .roster-filter-leaf.active) {
  background: rgba(var(--ui-color-rgb),0.12);
}
.roster-filter-src.active,
.roster-filter-leaf.active {
  font-weight: 700;
}
.roster-filter-arrow { font-size: 7px; opacity: 0.6; }
.roster-sub-menu {
  position: absolute;
  left: 100%;
  top: -3px;
  min-width: 100%;
  background: var(--console-body);
  border: 1px solid rgba(var(--ui-color-rgb),0.2);
  border-radius: 3px;
  z-index: 102;
  display: none;
}
.roster-filter-item:hover > .roster-sub-menu { display: block; }
.roster-sub-menu .region-dropdown-item { white-space: nowrap; }
/* 设置页窗口倍率下拉（复用 pokedex 下拉视觉） */
.window-scale-select { position: relative; flex-shrink: 0; }
.window-scale-dd { min-width: 110px; left: auto; right: 0; }
/* 属性筛选下拉/标签里的属性色圆点 */
.roster-type-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}
.pokedex-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 160px;
  overflow-y: auto;
  background: var(--console-body);
  border: 1px solid rgba(var(--ui-color-rgb),0.2);
  border-radius: 0 0 3px 3px;
  z-index: 100;
}
.pokedex-dropdown-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  font-size: 10px;
  color: var(--ui-color);
  cursor: pointer;
  border-bottom: 1px solid rgba(var(--ui-color-rgb),0.06);
}
.pokedex-dropdown-item:last-child {
  border-bottom: none;
}
.pokedex-dropdown-item:hover {
  background: rgba(var(--ui-color-rgb),0.08);
}
/* 键盘上下键选中的高亮 */
.pokedex-dropdown-item.active {
  background: rgba(var(--ui-color-rgb),0.15);
}
.pokedex-dropdown-item .dd-idx {
  opacity: 0.4;
  min-width: 24px;
}
.pokedex-dropdown-item .dd-name {
  flex: 1;
}
/* 搜索结果高亮闪烁 */
@keyframes searchFlash {
  0%   { background: rgba(var(--ui-color-rgb),0.25); }
  100% { background: transparent; }
}
@keyframes fadeOut {
  0%   { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}
.pokedex-entry.flash {
  animation: searchFlash 1s ease-out 2;
}
.log-back {
  font-size: 10px;
  font-weight: 700;
  color: var(--ui-color);
  cursor: pointer;
  padding: 2px 0;
  margin-bottom: 2px;
  user-select: none;
}
.log-back:hover { opacity: 0.7; }
.pokedex-idx {
  opacity: 0.5;
  width: 28px;
}
/* 图鉴页序号列加宽以容纳变体扩展编号（#0666-18），名称列同步让位 */
#pokedexView .pokedex-idx { width: 58px; white-space: nowrap; }
#pokedexView .pokedex-name { max-width: 55px; }
.pokedex-star {
  width: 14px;
  text-align: right;
  font-size: 10px;
  flex-shrink: 0;
  padding-right: 1px;
}
.pokedex-star svg { width: 10px; height: 10px; vertical-align: -2px; }
.pokedex-name {
  flex: 1;
  min-width: 0;
  max-width: 52px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pokedex-stat {
  width: 28px;
  text-align: right;
}

/* ===== 商店/数据视图 ===== */
#shopView, #dataView, #achievementView, #tutorialView {
  font-size: 11px;
  color: var(--ui-color);
}
#shopView, #incubatorView, #incubatorList { user-select: none; }

.shop-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  margin-bottom: 4px;
  border: 1px solid rgba(var(--ui-color-rgb),0.15);
  border-radius: 4px;
  background: var(--item-bg);
}
.shop-item.disabled { opacity: 0.35; pointer-events: none; }
.shop-item-left {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.shop-icon {
  width: 20px;
  height: 20px;
  image-rendering: pixelated;
}
.shop-item-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--ui-color);
}
.shop-item-right {
  display: flex;
  align-items: center;
  gap: 6px;
}
.shop-cost {
  font-size: 10px;
  color: var(--ui-color);
  font-weight: 600;
}
.shop-btn {
  font-size: 9px;
  padding: 2px 6px;
  border: 1px solid var(--ui-color);
  border-radius: 3px;
  color: var(--ui-color);
  font-weight: 700;
  cursor: pointer;
}
.shop-btn:hover { background: rgba(var(--ui-color-rgb),0.12); }
.shop-btn:active { transform: scale(0.95); }
.shop-mode-btn {
  font-size: 9px;
  padding: 2px 6px;
  border: 1px solid var(--ui-color);
  border-radius: 3px;
  color: var(--ui-color);
  font-weight: 700;
  cursor: pointer;
}
.shop-mode-btn:hover { background: rgba(var(--ui-color-rgb),0.12); }

/* 商店批量兑换右键菜单（钱不够的选项降透明度并禁用） */
.shop-ctx-menu {
  position: fixed;
  z-index: 9999;
  background: var(--screen-bg-light);
  border: 1px solid var(--screen-bg-dark);
  border-radius: 5px;
  padding: 3px;
  transform: translateX(-20%);
}
.shop-ctx-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  white-space: nowrap; /* 菜单文案单行显示，避免宽度不足时意外换行 */
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 10px;
  color: var(--ui-color);
  cursor: pointer;
}
.shop-ctx-item:hover { background: rgba(var(--ui-color-rgb),0.12); }
.shop-ctx-item.disabled { opacity: 0.35; pointer-events: none; }
.shop-ctx-item.sel { background: rgba(var(--ui-color-rgb),0.18); }
.shop-ctx-qty { font-weight: 700; }
.shop-ctx-cost { color: var(--ui-color); }

/* 游戏厅兑换菜单：更紧凑 */
.casino-exchange-menu .shop-ctx-item {
  font-size: 9px;
  padding: 2px 6px;
  justify-content: flex-start;
  gap: 8px;
}
.casino-exchange-menu .shop-ctx-qty {
  min-width: 40px;
}

/* 商店兑换确认文案框（复用遇敌页文字框样式，改为商店内贴底流式布局） */
.shop-text-box {
  position: absolute;
  width: 100%;
  flex-shrink: 0;
  align-items: flex-start; /* 文案顶部对齐，避免与右侧确认按钮重叠 */
}
.shop-text-box .text-box-content {
  padding-top: 7px;
  font-size: 10px; /* 字号调小，完整显示不省略 */
}
.shop-confirm-btns {
  position: absolute;
  bottom: 4px;
  right: 6px;
  display: flex;
  gap: 4px;
  align-items: center;
  z-index: 2;
}
@keyframes shopBoxIn {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* ===== 设置面板 ===== */

#tutorialContent p {
  margin-bottom: 6px;
}
#tutorialContent .tutorial-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 6px;
  font-size: 10px;
  table-layout: fixed;
}
#tutorialContent .tutorial-table th,
#tutorialContent .tutorial-table td {
  border: 1px solid rgba(var(--ui-color-rgb),0.2);
  padding: 2px 5px;
  text-align: center;
  line-height: 1.45;
  vertical-align: top;
  overflow-wrap: break-word;
}
#tutorialContent .tutorial-table th {
  background: rgba(var(--ui-color-rgb),0.1);
  font-weight: 700;
  font-size: 10px;
}
/* 首列按表头宽度分配（如"特性/道具/球种"），其余列平分剩余空间 */
#tutorialContent .tutorial-table th:first-child,
#tutorialContent .tutorial-table td:first-child {
  width: 46px;
}

/* ===== 教程双栏：左侧导航列表 + 右侧详情 ===== */
#tutorialView {
  flex-direction: row;
  overflow: hidden;
  padding: 3px;
}
#tutorialList {
  flex-shrink: 0;
  width: 70px;
  min-height: 0;
  overflow-y: auto;
  padding: 2px 3px 2px 0;
  border-right: 1px solid rgba(var(--ui-color-rgb),0.15);
  font-size: 10px;
  color: var(--ui-color);
  user-select: none;
}
.tutorial-nav-item {
  padding: 4px 9px 4px 6px;
  margin-bottom: 2px;
  border-radius: 3px;
  cursor: pointer;
  line-height: 1.35;
  color: var(--ui-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.12s;
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
}
.tutorial-nav-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  fill: var(--ui-color);
}
.tutorial-nav-item:hover { background: rgba(var(--ui-color-rgb),0.08); }
.tutorial-nav-item.active {
  background: var(--ui-color);
  color: #fff;
  font-weight: 700;
}
#tutorialContent {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 3px 6px;
  font-size: 11px;
  line-height: 1.7;
  color: var(--ui-color);
}
#tutorialContent .tutorial-title {
  font-size: 12px;
  font-weight: 700;
  border-bottom: 1px solid rgba(var(--ui-color-rgb),0.2);
  padding-bottom: 3px;
  margin-bottom: 6px;
}
/* 教程章节红点（未领取奖励时显示在左侧导航项右侧，颜色与标题栏红点一致） */
.tutorial-nav-badge {
  position: absolute;
  top: 50%;
  right: 2px;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #e74c3c;
}
/* 教程标题行：标题 + 右侧领取糖果按钮同行（覆盖标题自带的底部边框，避免多余下划线） */
.tutorial-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tutorial-title-row .tutorial-title {
  flex: 1;
  min-width: 0;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
/* 教程领取按钮：无背景色，仅边框描边；hover 轻微提亮 */
.tutorial-claim-btn { flex-shrink: 0; background: transparent; }
.tutorial-claim-btn:hover:not(:disabled) { background: rgba(var(--ui-color-rgb), 0.15); }
.tutorial-claim-btn .candy-icon {
  width: 11px;
  height: 11px;
  image-rendering: pixelated;
  vertical-align: -2px;
}
.settings-group {
  padding: 0 0 6px;
}
/* 板块之间用分割线分隔 */
.settings-group + .settings-group {
  border-top: 1px solid rgba(var(--ui-color-rgb),0.15);
  padding-top: 8px;
}
.settings-group-title {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 4px 6px;
}
/* 左侧竖条装饰，与行标签区分 */
.settings-group-title::before {
  content: '';
  width: 3px;
  height: 11px;
  border-radius: 2px;
  background: var(--ui-color);
  opacity: 0.75;
}
/* 三级子标题：板块标题 > 行标签 > 子标题（更小更轻、半透明） */
.settings-sub-title {
  font-size: 10px;
  font-weight: 600;
  color: var(--ui-color);
  opacity: 0.8;
  user-select: none;
  padding: 2px 4px 3px;
}
/* 设置页底部 GitHub 链接：颜色与「版权声明」一致（默认文字色 + 半透明），hover 变主题绿 */
.settings-footer-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  padding: 6px 0;
  color: var(--color-text);
  opacity: 0.55;
  text-decoration: none;
  font-size: 12px;
  cursor: pointer;
  transition: color 0.15s, opacity 0.15s;
}
/* GitHub 图标：currentColor 在 <use> shadow DOM 不穿透，显式继承链接颜色（含 hover） */
.settings-footer-link svg {
  color: inherit;
  fill: currentColor;
}
.settings-footer-link:hover {
  opacity: 1;
  color: var(--ui-color);
}
/* 版本号：小字半透明居中，与版权声明同一字号层级 */
.settings-version {
  text-align: center;
  font-size: 9px;
  opacity: 0.5;
  padding: 0 0 2px;
  user-select: none;
}
.auto-catch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 4px;
}
.auto-catch-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--ui-color);
  user-select: none;
}
.toggle-switch {
  position: relative;
  width: 30px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
}
.toggle-track {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: rgba(var(--ui-color-rgb),0.2);
  transition: background 0.2s;
}
.toggle-track.on {
  background: var(--ui-color);
}
.toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.toggle-track.on + .toggle-knob {
  transform: translateX(14px);
}

.ball-check-row {
  display: flex;
  gap: 4px;
  padding: 2px 4px 6px;
  justify-content: center;
}
.gender-check-row {
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
}
.volume-row {
  display: flex;
  align-items: center;
  flex: 1;
  max-width: 110px;
}
.volume-slider {
  flex: 1;
  min-width: 0;
  height: 6px;
  border-radius: 3px;
  -webkit-appearance: none;
  appearance: none; 
  cursor: pointer;
  outline: none;
  background:
    radial-gradient(circle at var(--volume-fill, 60%) 50%, var(--ui-color) 3px, transparent 3.5px),
    linear-gradient(90deg, var(--ui-color) var(--volume-fill, 60%), rgba(var(--ui-color-rgb), 0.2) var(--volume-fill, 60%));
}
/* 白色小圆点 thumb */
.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  border: none;
}
.volume-slider::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  border: none;
}
.ball-check {
  font-size: 10px;
  color: var(--ui-color);
  cursor: pointer;
  user-select: none;
  padding: 1px 4px;
  border-radius: 3px;
  transition: background 0.12s;
}
.ball-check:hover {
  background: rgba(var(--ui-color-rgb),0.1);
}
.ball-check.on {
  font-weight: 700;
}

/* 遇敌过滤面板（自动操作开启后展开） */
.filter-panel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 4px 2px;
}
/* 捕捉条件表格底部提示行：提示文字靠左，右侧小号「恢复默认」按钮 */
.cf-hint-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}
/* 捕捉条件表格底部提示：等级范围外的遭遇自动逃跑 */
.cf-hint {
  margin-top: 2px;
  font-size: 9px;
  opacity: 0.55;
  text-align: left;
}
.cf-reset-btn {
  border: none;
  background: rgba(55, 109, 86, 0.12);
  color: var(--ui-color);
  font-size: 9px;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
}
.cf-reset-btn:hover {
  background: rgba(55, 109, 86, 0.22);
}
/* 捕捉条件表格：四行（普通/普通闪/神兽/神兽闪）× 捕捉/暂停/逃跑 + 最低等级/最高等级/未捕获 */
.cf-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 10px;
  color: var(--ui-color);
}
.cf-table th,
.cf-table td {
  border: 1px solid rgba(var(--ui-color-rgb), 0.25);
  text-align: center;
  padding: 0;
  height: 24px;
  overflow: hidden;
}
.cf-table thead th {
  font-size: 9px;
  font-weight: 700;
  background: rgba(var(--ui-color-rgb), 0.08);
  white-space: nowrap;
  height: 20px;
}
/* 捕捉等级列合并了最低/最高，占两列宽度 */
.cf-table thead th.cf-col-lv {
  width: 28%;
}
.cf-table .cf-corner {
  background: linear-gradient(to bottom left,
    transparent calc(50% - 0.5px),
    rgba(var(--ui-color-rgb), 0.45) calc(50% - 0.5px),
    rgba(var(--ui-color-rgb), 0.45) calc(50% + 0.5px),
    transparent calc(50% + 0.5px));
}
.cf-row-label {
  width: 46px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.cf-cell {
  cursor: pointer;
  user-select: none;
  transition: background 0.12s, color 0.12s;
}
.cf-cell.act:hover {
  background: rgba(var(--ui-color-rgb), 0.1);
}
.cf-cell.act.on {
  background: var(--ui-color);
  color: var(--screen-bg);
  font-weight: 700;
}
.cf-cell.lv {
  cursor: default;
  padding: 2px;
}
/* 等级输入框用内层 flex 容器排列，td 保持 table-cell 以免边框合并失效产生双线 */
.cf-cell.lv .cf-lv-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.cf-cell.lv .filter-lv-input {
  flex: 1;
  min-width: 0;
}
.cf-cell.uncaught {
  font-size: 12px;
}
.cf-cell.uncaught:hover {
  background: rgba(var(--ui-color-rgb), 0.1);
}
.cf-cell.uncaught.on {
  background: var(--ui-color);
  color: var(--screen-bg);
  font-weight: 700;
}
/* 非捕捉行：等级/未捕获不生效，弱化显示并禁止点击 */
.cf-cell.dim {
  opacity: 0.4;
  pointer-events: none;
}
.filter-lv-input {
  width: 42px;
  height: 18px;
  box-sizing: border-box;
  background: transparent;
  border: 1px solid rgba(var(--ui-color-rgb),0.4);
  border-radius: 3px;
  color: var(--ui-color);
  font-size: 10px;
  font-weight: 400;
  text-align: center;
  font-family: inherit;
  padding: 0 2px;
  outline: none;
  transition: border-color 0.12s;
}
.filter-lv-input:focus {
  border-color: var(--ui-color);
}
/* 隐藏 number 输入框上下箭头，保持干净 */
.filter-lv-input::-webkit-inner-spin-button,
.filter-lv-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 补球优先级：水平三格，从左到右优先级从高到低。
   左右箭头调序，点击格子启用/禁用该球补球 */
.refill-order-row {
  display: flex;
  gap: 4px;
  padding: 2px 4px 4px 10px;
}
.refill-order-item {
  flex: 0 0 auto;
  width: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  font-size: 10px;
  font-weight: 400;
  padding: 4px 2px;
  border-radius: 4px;
  cursor: pointer;
  background: rgba(var(--ui-color-rgb),0.06);
  border: 1.5px solid rgba(var(--ui-color-rgb),0.5); /* 勾选状态边框加深 */
  user-select: none;
  transition: background 0.12s, opacity 0.12s;
}
.refill-order-item:hover {
  background: rgba(var(--ui-color-rgb),0.12);
}
.refill-order-item.off {
  opacity: 0.4;
  text-decoration: line-through;
  border-color: rgba(var(--ui-color-rgb),0.15);
}
.refill-order-name {
  flex: 1;
  text-align: center;
  white-space: nowrap;
}
.refill-order-arrow {
  width: 14px;
  flex-shrink: 0;
  font-size: 13px;
  line-height: 1;
  text-align: center;
  color: var(--ui-color);
  opacity: 0.7;
  cursor: pointer;
  user-select: none;
}
.refill-order-arrow:hover {
  opacity: 1;
}
.refill-order-arrow.hidden {
  visibility: hidden;
}

/* 重置存档（二次点击确认） */
.reset-save-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 4px; /* 与 .auto-catch-row 左右内边距一致，label 对齐 */
}
.reset-save-btn {
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  color: var(--ui-color);
  border: 1px solid var(--ui-color);
  border-radius: 4px;
  padding: 3px 12px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.reset-save-btn:hover { background: rgba(var(--ui-color-rgb),0.1); }
.reset-save-btn:active { transform: scale(0.96); }
.reset-save-btn.confirm {
  color: #fff;
  background: var(--ui-color);
  border-color: var(--ui-color);
}

/* === 启动画面 === */
#splash {
  position: absolute;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--screen-bg);
  transition: opacity 0.45s ease;
}
#splash.hide {
  opacity: 0;
  pointer-events: none;
}
.splash-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 100%;
  padding: 4px;
}
.splash-title {
  font-family: monospace;
  font-weight: 800;
  font-size: clamp(20px, 5vmin, 28px);
  letter-spacing: 8px;
  text-indent: 8px;
  color: var(--console-body);
  text-shadow: 2px 2px 0 rgba(0,0,0,0.25);
  user-select: none;
}
.splash-subtitle {
  font-size: 10px;
  letter-spacing: 6px;
  text-indent: 6px;
  margin-top: 3px;
  color: var(--console-body);
  opacity: 0.7;
  user-select: none;
}
.splash-stage {
  position: relative;
  width: 300px;
  height: min(200px, 46vh);
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.splash-hero {
  width: 100px;
  object-fit: contain;
  image-rendering: pixelated;
  opacity: 0;
  animation: splash-item-in 0.6s ease 0.2s forwards;
  user-select: none;
}
.splash-ring {
  --r: min(86px, 22vh);
  position: absolute;
  inset: 0;
  /* 道具层在主角之上，收缩叠放时不被遮挡 */
  z-index: 1;
  pointer-events: none;
  animation: splash-spin 1.5s linear both;
  user-select: none;
}
.splash-item {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  image-rendering: pixelated;
  opacity: 0;
  z-index: calc(6 - var(--i));
  transform: rotate(calc(var(--i) * 51.428deg)) translateY(calc(var(--r) * -1)) rotate(calc(var(--i) * -51.428deg));
  animation: splash-item-in 0.45s ease calc(var(--i) * 0.08s + 0.15s) forwards;
}
.splash-item--sm {
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
}
@keyframes splash-spin {
  to { transform: rotate(480deg); }
}
@keyframes splash-item-in {
  to { opacity: 1; }
}
/* 启动期间背包槽位隐藏，道具落位时依次浮现 */
.splash-hidden { opacity: 0 !important; }
/* 开场剧情结束后进入 splash：底部背包栏由透明淡入，避免 boot-no-ui 移除时瞬间闪现 */
.backpack-bar.splash-reveal {
  animation: backpack-bar-in 0.5s ease;
}
@keyframes backpack-bar-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.bag-slot--pop { animation: bag-pop 0.45s ease forwards; }
@keyframes bag-pop {
  from { opacity: 0; transform: scale(0.4); }
  to { opacity: 1; transform: scale(1); }
}
/* 统计栏渐显 */
.stats-fade { animation: stats-fade-in 0.45s ease forwards; }
@keyframes stats-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* === 宝可梦仓库 === */
/* 批量放生选中行 */
.roster-batch-sel {
  background: rgba(255, 210, 127, 0.18) !important;
  outline: 1px solid rgba(255, 210, 127, 0.4);
  border-radius: 2px;
}

.roster-empty {
  padding: 24px 4px;
  text-align: center;
  font-size: 11px;
  opacity: 0.5;
}
.roster-shiny { color: inherit; }

/* 列表复用图鉴样式（.pokedex-entry/.pokedex-header/.pokedex-idx/.pokedex-name/.pokedex-star），
   仅图标/个体值/来源列按内容放宽列宽；滚动容器用共用类 .list-scroll */
.view-list .pokedex-name {
  flex: 0 0 55px; /* 名称列固定宽：宝可梦名最多 5 字，超长省略 */
  max-width: none;
}
/* 蛋仓库只有 3 列，名称列容纳 7 字（XX的蛋），个体值列容纳 31/31/31/31/31/31 */
.nursery-egg-header .pokedex-name,
.nursery-egg-row .pokedex-name { flex: 0 0 95px; max-width: none; }
.nursery-egg-header .roster-iv,
.nursery-egg-row .roster-iv { width: 90px; }
.nursery-egg-row .pokedex-name { display: flex; align-items: center; }
.nursery-egg-row .bounty-trade-btn { margin-right: 6px; } /* 蛋列表丢弃按钮不贴右缘（尺寸已随全局统一为小版） */
.nursery-egg-header .bounty-trade-btn-col { padding-right: 6px; } /* 表头「丢弃」文字同步左移对齐 */
.roster-header, .roster-row { gap: 2px; }
/* 仓库的闪光星标列更窄，避免图标与编号之间空出太多 */
.roster-header .pokedex-star, .roster-row .pokedex-star { width: 8px; padding-right: 0; }
/* 仓库行闪光星与变体圆环共用一个类（pokedex-star-svg），统一 8px 尺寸 */
.roster-row .pokedex-star svg { width: 8px; height: 8px; display: block; fill: currentColor; }
/* 仓库编号列加宽以容纳变体扩展编号（#0058-1/#0201-10），图标列同步收窄 */
.roster-header .pokedex-idx, .roster-row .pokedex-idx { width: 46px; }
.roster-header .roster-icon, .roster-row .roster-icon { width: 20px; }
/* 名称列弹性填充中间空隙，把等级/个体值列推到行尾，编号列留足空间 */
.roster-header .pokedex-name,
.roster-row:not(.nursery-egg-row) .pokedex-name { flex: 1; max-width: none; }
.roster-icon {
  width: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.roster-icon-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  image-rendering: pixelated;
}
/* 仓库行图标随列收窄到 20px（其他列表不受影响） */
.roster-row .roster-icon-img {
  width: 20px;
  height: 20px;
}
/* 行高固定，保证各行高度一致 */
.roster-row { height: 30px; }
#rosterList.batch-compact .roster-row {
  height: 24px;
  padding: 1px 0;
}
#rosterList.batch-compact .roster-row > * { font-size: 10px; }
#rosterList.batch-compact .roster-row .roster-icon-img {
  width: 16px;
  height: 16px;
}
/* 仓库列表独立等级列：左对齐（紧贴名称列），不加粗 */
.roster-lv-col {
  width: 44px;
  flex-shrink: 0;
  text-align: left;
  padding-left: 6px; /* 与名称列拉开，等级 100 时性别图标 + 数字也不被挤压 */
  font-size: 10px;
  color: var(--ui-color);
  font-variant-numeric: tabular-nums;
  white-space: nowrap; /* 性别图标与 Lv 数字强制单行，禁止换行 */
}
/* 详情页名字后的等级小字（与名字不同字体） */
.roster-detail-lv {
  font-family: monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--ui-color);
  opacity: 0.75;
  margin-left: 6px;
  vertical-align: 1px;
}
/* 详情页个体状态标签：训练中 / 繁育中 / 队伍中（跟在属性徽章右侧，高度与 type-badge 对齐） */
.roster-status-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  color: var(--ui-color);
  border: 1px solid var(--ui-color);
  opacity: 0.85;
  white-space: nowrap;
  margin-left: 4px;
}
/* 改名按钮 */
.roster-nick-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 4px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ui-color);
  opacity: 0.8;
  cursor: pointer;
  vertical-align: -2px;
}
.roster-nick-btn:hover {
  color: var(--ui-color-dark);
}
.roster-nick-input {
  font-size: 12px;
  font-weight: 700;
  color: var(--ui-color);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--ui-color);
  border-radius: 3px;
  padding: 0 4px;
  width: 80px;
  outline: none;
  font-family: inherit;
}
.roster-nick-input:focus {
  background: rgba(255, 255, 255, 0.14);
}
.roster-iv {
  width: 34px;
  flex-shrink: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* 个体详情 */
.roster-detail-head {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 2px 6px 6px;
}
.roster-detail-head .poke-img-grid {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}
.roster-detail-head .poke-img-grid img {
  max-width: 48px;
  max-height: 48px;
}
/* 详情小图上 RGB 重影收窄：通用偏移（3px）按小图比例过大，会糊成一片 */
.roster-detail-head .poke-img-grid img.fx-variant-rgb {
  will-change: filter;
  transform: translateZ(0);
  filter:
    drop-shadow(1.5px 0 0 rgba(255, 0, 80, .65))
    drop-shadow(-1.5px 0 0 rgba(0, 220, 255, .65));
}
.roster-detail-block {
  border-top: 1px solid rgba(var(--ui-color-rgb),0.1);
  padding: 6px 10px;
}
.roster-detail-title {
  font-size: 10px;
  font-weight: 700;
}
.roster-iv-flex {
  display: flex;
  align-items: center;
  gap: 10px;
}
.roster-hex {
  width: 90px;
  height: 90px;
  flex-shrink: 0;
  display: block;
}
.roster-iv-bars { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.roster-iv-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
}
.roster-iv-item > span:first-child { width: 22px; flex-shrink: 0; }
.roster-iv-item > span:last-child {
  width: 16px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.roster-iv-bar {
  flex: 1;
  height: 3px;
  background: rgba(var(--ui-color-rgb),0.12);
  border-radius: 2px;
  overflow: hidden;
}
.roster-iv-fill {
  height: 100%;
  background: var(--ui-color);
  border-radius: 2px;
}

/* 个体详情配招 */
.roster-moves-block { padding-bottom: 10px; }
/* 标题行：左"招式 X/4"，右"自动"按钮 */
.roster-move-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.roster-move-title-row .roster-detail-title { margin-bottom: 0; }
.roster-move-tools { display: flex; gap: 4px; }
/* 招式槽 2 行 × 2 列 */
.roster-moves-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4px;
}
.roster-move-slot {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--ui-color);
  padding: 4px 5px;
  background-color: transparent;
  border: 1px solid rgba(var(--ui-color-rgb),0.25);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
}
.roster-move-slot:hover { background: rgba(255,255,255,0.32); }
.roster-move-slot.empty { border-style: dashed; }
.roster-move-slot-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.roster-move-slot-name.slot-empty { opacity: 0.4; font-weight: 600; }
.roster-auto-btn { flex-shrink: 0; padding: 3px 6px; }

/* ---- 手动配招独立页 ---- */
/* 顶部当前配招槽位：2 行 × 2 列 */
.move-edit-slots {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4px;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(var(--ui-color-rgb),0.15);
  flex-shrink: 0;
}
.move-edit-slot {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 5px;
  border: 1px solid rgba(var(--ui-color-rgb),0.3);
  border-radius: 5px;
  background: var(--item-bg);
  font-size: 10px;
  font-weight: 500;
  color: var(--ui-color);
  cursor: pointer;
  transition: background 0.15s;
  touch-action: none; /* 允许触摸拖拽交换槽位 */
}
.move-edit-slot:hover { background: rgba(255,255,255,0.32); }
.move-edit-slot.empty { background: rgba(255,255,255,0.06); border-style: dashed; }
/* 配招页拖拽：源压暗 + 目标高亮 */
.move-edit-slot.dragging { opacity: 0.4; }
.move-edit-slot.drag-over { background: rgba(var(--ui-color-rgb),0.16); border-color: var(--ui-color); border-style: dashed; }
.move-edit-row.dragging { opacity: 0.4; }
/* 配招拖拽幽灵卡片：属性圆点 + 招式名跟随指针 */
.move-edit-drag-ghost {
  position: absolute;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 1px 5px;
  background: var(--screen-bg-light);
  border: 1px solid var(--ui-color);
  border-radius: 5px;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.move-edit-ghost-name { font-size: 10px; font-weight: 800; color: var(--ui-color-dark); white-space: nowrap; }
.move-edit-slot-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.move-edit-slot-x {
  flex-shrink: 0;
  margin-left: auto;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,0.22);
  color: #fff;
  cursor: pointer;
  padding: 0;
}
.move-edit-slot-x:hover { background: #c9563c; }
.move-edit-slot-x svg { width: 8px; height: 8px; fill: currentColor; }
/* 左列表 + 右详情 */
.move-edit-main { flex: 1; min-height: 0; display: flex; }
.move-edit-list {
  width: 48%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 4px;
}
.move-edit-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 500;
  color: var(--ui-color);
  padding: 3px 6px;
  border: none;
  border-radius: 4px;
  background: rgba(255,255,255,0.12);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.move-edit-row:hover { background: rgba(255,255,255,0.25); }
/* 招式类别图标（物理/特殊/变化）：详情面板「类别」行展示，hover 用自制 tooltip */
.move-cat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  cursor: pointer;
}
.move-cat-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
.move-edit-detail-stats b { display: inline-flex; align-items: center; }
.move-edit-row.active { background: rgba(var(--ui-color-rgb),0.18); box-shadow: inset 2px 0 0 var(--ui-color); }
.move-edit-row.sel { border: 1px solid var(--ui-color); background: rgba(var(--ui-color-rgb),0.22); }
.move-edit-row-lv { flex-shrink: 0; margin-left: auto; font-size: 9px; color: var(--ui-color); }
.move-edit-detail {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-left: 1px solid rgba(var(--ui-color-rgb),0.15);
  overflow-y: auto;
}
.move-edit-detail-empty {
  margin: auto;
  font-size: 11px;
  color: var(--ui-color);
  text-align: center;
}
.move-edit-detail-head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.b-move-type.big { width: 26px; height: 26px; border-radius: 8px; }
.b-move-type.big .b-move-type-icon { width: 16px; height: 16px; }
.move-edit-detail-name { font-size: 12px; font-weight: 700; color: var(--ui-color-dark); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.move-edit-detail-stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.move-edit-detail-stats > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.12);
}
.move-edit-detail-stats span { font-size: 9px; color: var(--ui-color); }
.move-edit-detail-stats b { font-size: 11px; font-weight: 700; color: var(--ui-color-dark); font-variant-numeric: tabular-nums; }
.move-edit-detail-desc {
  font-size: 10px;
  line-height: 1.5;
  color: var(--ui-color);
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  padding: 5px 6px;
}

/* 悬赏提交列表 */
.roster-trade-empty { padding: 12px 8px; text-align: center; font-size: 11px; opacity: 0.6; }

/* 悬赏提交/交换选择列表：复用仓库行样式，行右侧为提交/交换按钮 */
/* #bountyContent / #tradeContent 复用 .list-scroll（flex:1 + overflow-y:auto + min-height:0） */
/* 结构同蛋仓库：进度统计 + 昵称搜索 + 表头固定在列表上方 + 行区独立滚动 */
.bounty-trade-list {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 0 6px 4px;
  font-size: 11px;
  color: var(--ui-color);
}
.bounty-trade-list .pokedex-name { flex: 0 0 60px; max-width: none; }
.bounty-trade-list .pokedex-star {
  width: 8px;
  padding-right: 0;
  text-align: center;
  font-size: 8px;
}
/* 交换/悬赏提交列表：个体值列用 flex:1 吸收剩余宽度，把性格/按钮列固定到右缘，
   表头与各行列位置一致，避免按内容宽度错位 */
.bounty-trade-list .roster-ivs {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 10px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
/* NPC 有该项个体值需求时高亮 */
.bounty-trade-list .roster-iv-hl {
  font-weight: 700;
  color: var(--ui-color);
}
.bounty-trade-list .roster-nature {
  width: 40px;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 10px;
}
.bounty-trade-btn-col {
  width: 44px;
  flex-shrink: 0;
  text-align: right;
  font-size: 10px;
  font-weight: 700;
}
/* 交换/悬赏列表提交按钮列：窄于默认丢弃列，避免右侧溢出 */
.bounty-trade-list .bounty-trade-btn-col { width: 38px; }
/* 交换/悬赏提交列表表头：与图鉴/仓库表头一致（继承 .pokedex-header 基础字号/字重，
   不再单独放大），gap 与行一致保证各列完全对齐；个体值列 flex:1 后表头不会拥挤。
   background 用不透明屏幕底色：表头是 sticky 定位，滚动内容会被表头遮住而不是透过来 */
.bounty-trade-list .pokedex-header.roster-header {
  gap: 2px;
  padding: 2px 0 3px;
  background: var(--screen-bg);
  /* 关闭继承自 .pokedex-header 的 sticky 吸顶：行区独立滚动，表头作为普通兄弟节点固定不动 */
  position: static;
  z-index: auto;
}
.bounty-trade-list .pokedex-header .roster-ivs,
.bounty-trade-list .pokedex-header .roster-nature,
.bounty-trade-list .pokedex-header .bounty-trade-btn-col {
  font-size: inherit;
  font-weight: inherit;
  opacity: 1;
}
.bounty-trade-btn {
  display: block;
  margin-left: auto;
  margin-right: 4px;
  font-family: inherit;
  line-height: 1;
  font-size: 9px;
  font-weight: 700;
  color: rgb(var(--ui-color-rgb));
  padding: 2px 6px;
  border: 1px solid rgb(var(--ui-color-rgb));
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.bounty-trade-btn:hover { background: rgba(var(--ui-color-rgb),0.15); }
.bounty-trade-btn:active { transform: scale(0.92); }
.bounty-trade-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.bounty-trade-btn:disabled:hover { background: transparent; }
.bounty-trade-btn:disabled:active { transform: none; }
/* 蛋仓库「孵化中」禁用按钮：更紧凑 */
.nursery-egg-row .bounty-trade-btn:disabled {
  padding: 2px 3px;
  font-size: 8px;
}
/* 悬赏提交/交换选择列表行：点击进入仓库个体详情 */
.bounty-trade-row[data-trade-view] { cursor: pointer; }

/* === 交换广场 === */
/* 顶部刷新倒计时 */
#tradeRefreshTip {
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  padding: 4px 2px 6px;
  opacity: 0.8;
}
.trade-list {
  display: flex;
  flex-direction: column;
}
/* 每条需求一条，仅用分隔线隔开 */
.trade-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 5px 2px;
  border-bottom: 1px solid rgba(var(--ui-color-rgb), 0.15);
}
.trade-row:last-child { border-bottom: none; }
.trade-row.traded { opacity: 0.5; }
/* 交换忽略后的行淡化：右键该行可忽略/恢复（忽略后不再红点提醒） */
.trade-row.ignored { opacity: 0.45; }
/* 孵蛋器忽略后的行淡化：右键已孵化的蛋可忽略/恢复（忽略后不再红点与托盘蛋动画提醒） */
.incubator-row.ignored { opacity: 0.45; }
/* 主行：NPC 图 + 给出图标 + 需求文字 + 交换按钮 */
.trade-main {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* NPC 首帧拼图：13列×2行，每格 16×21（已裁顶部留白、底部对齐）；background-size 为 2x（416×84），位置由 JS 内联计算 */
.npc-sprite {
  width: 32px;
  height: 42px;
  background-repeat: no-repeat;
  background-image: url('./character/npcs.png');
  background-size: 448px 84px;
  image-rendering: pixelated;
}
/* 底部一小行：NPC 名 / 给出宝可梦名（闪光带星标），都靠左 */
.trade-footer {
  padding-left: 6px;
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 9px;
  opacity: 0.85;
}
.trade-npc-name {
  white-space: nowrap;
}
.trade-give-name {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 60%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.trade-give-name em { font-style: normal; font-size: 9px; font-weight: 400; color: var(--ui-color); }
.trade-shiny {
  flex-shrink: 0;
  color: var(--ui-color);
}
/* 需求文字 */
.trade-text {
  flex: 1;
  min-width: 0;
  font-size: 10px;
  line-height: 1.5;
  word-break: break-all;
}
/* 给出宝可梦入口：小图标，点击进入详情页 */
.trade-give {
  flex: none;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  font-family: inherit;
  cursor: pointer;
  background: transparent;
  border: none;
  transition: background 0.15s;
  transform: translateY(5px);
  animation: pokeJump 0.5s steps(1, end) infinite;
  animation-delay: 0.3s;
}
@keyframes pokeJump {
  0%, 55%  { transform: translateY(5px); }
  58%      { transform: translateY(1px); }
  68%      { transform: translateY(1px); }
  71%      { transform: translateY(5px); }
  100%     { transform: translateY(5px); }
}
.trade-give-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  image-rendering: pixelated;
}
/* 交换详情页右上角「仓库情况」按钮：跳转仓库并预填搜索 */
.trade-check-roster {
  font-size: 9px;
  font-weight: 700;
  color: var(--ui-color);
  background: var(--screen-bg);
  border: 1px solid var(--ui-color);
  border-radius: 4px;
  padding: 2px 6px;
  cursor: pointer;
  user-select: none;
  opacity: 0.8;
  transition: opacity 0.12s;
}
.trade-check-roster:hover { opacity: 1; }
.trade-btn {
  flex-shrink: 0;
  font-family: inherit;
  line-height: 1;
  font-size: 10px;
  font-weight: 700;
  color: var(--ui-color);
  padding: 5px 8px;
  border: 1px solid var(--ui-color);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.trade-btn:hover { background: rgba(var(--ui-color-rgb), 0.15); }
.trade-btn:active { transform: scale(0.92); }
.trade-btn.locked { opacity: 0.4; cursor: default; }
.trade-btn.done { opacity: 0.4; cursor: default; }
.trade-empty {
  padding: 24px 0;
  text-align: center;
  opacity: 0.6;
}

/* === 告别场景（放生 / 提交悬赏复用）：全屏独立场景，图标锚点与遭遇页一致 === */
#goodbyeView {
  display: none;
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  z-index: 55;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--screen-bg);
  overflow: hidden;
}
.goodbye-scene-img {
  position: absolute;
  left: 50%;
  bottom: 42%;
  width: 96px;
  height: 96px;
  object-fit: contain;
  image-rendering: pixelated;
  animation: goodbyeIn 0.3s ease-out both;
}
.goodbye-scene-img.leaving {
  animation: goodbyeShrink 1.2s cubic-bezier(0.45, 0, 1, 1) both;
  animation-delay: 0.15s;
}
@keyframes goodbyeIn {
  from { transform: translateX(-50%) scale(0.6); opacity: 0; }
  to   { transform: translateX(-50%) scale(1); opacity: 1; }
}
@keyframes goodbyeShrink {
  from { opacity: 1; transform: translateX(-50%) scale(1); }
  to   { opacity: 0; transform: translateX(-50%) scale(0.5); }
}
/* 交换获得：收到的宝可梦从小放大入场（与抓捕成功同款节奏） */
.goodbye-scene-img.arrive {
  animation: tradeArrive 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes tradeArrive {
  from { transform: translateX(-50%) scale(0.25); opacity: 0; }
  to   { transform: translateX(-50%) scale(1); opacity: 1; }
}
/* 放生返还：宝可梦隐藏后在其原位置展示经验池进度条与数值（进度条复用经验糖果页样式） */
.goodbye-xp-pool {
  position: absolute;
  left: 50%;
  bottom: 42%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.goodbye-xp-pool-text {
  font-family: monospace;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums; /* 数字滚动时不抖动 */
  color: var(--ui-color);
  text-align: center;
  white-space: nowrap;
}
/* 经验池攒满产糖：糖果图标显示在进度条上方（absolute 脱离文档流，不挤动进度条） */
.goodbye-xp-candy {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  margin-left: -20px; /* 40px 宽的一半，居中（transform 留给弹入动画） */
  width: 40px;
  height: 40px;
  object-fit: contain;
  image-rendering: pixelated;
  animation: goodbyeCandyPop 0.7s ease-out both;
}
@keyframes goodbyeCandyPop {
  0%   { transform: scale(0.2); opacity: 0; }
  60%  { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
/* 底部文字框（询问确认 / 再见文案）——与战斗页 .text-box 同款排布：左文案 + 右下角按钮 */
.goodbye-box {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 52px; /* 固定高度，与询问阶段一致；多行文本单行省略不撑高 */
  background: var(--console-body);
  border-top: 2px solid var(--console-border);
  display: flex;
  align-items: center;
}
.goodbye-box-text {
  flex: 1;
  padding: 8px 10px;
  padding-right: 72px; /* 为右下角按钮/箭头让位 */
  font-family: monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--ui-color);
  line-height: 1.4;
  white-space: nowrap; /* 单行显示，超长省略号 */
  overflow: hidden;
  text-overflow: ellipsis;
  align-self: flex-start; /* 文本顶部对齐 */
}
.goodbye-box-btns {
  position: absolute;
  bottom: 4px;
  right: 6px;
  display: flex;
  gap: 4px;
  align-items: center;
}
/* 交换获得提示：底部倒三角箭头（与抓捕成功同款），点击进入下一步 */
.goodbye-box-arrow {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 2px;
}
.goodbye-box-arrow:active { transform: translateY(1px); }

/* 派遣领取结果：全屏页（图标列表居中展示，底部 textbox 用 goodbye-box） */
#dispatchResultView {
  display: none;
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  z-index: 54;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  background: var(--screen-bg);
  overflow: hidden;
}
/* 结果页 textbox 从底部弹出，高度压矮 */
#dispatchResultView .goodbye-box {
  height: 34px;
  transform: translateY(100%);
  transition: transform 0.25s;
}
#dispatchResultView .goodbye-box-text {
  font-size: 11px;
  padding: 4px 10px;
  padding-right: 80px; /* 为确定按钮让位 */
}
#dispatchResultView.open .goodbye-box {
  transform: translateY(0);
}
/* 领取列表：单个领取一行、一键领取多行，宽度拉满、顶部紧凑排列 */
.dispatch-result-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 2px;
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 6px 46px; /* 底部留白给矮版 textbox 让位 */
}
.dispatch-result-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  width: 100%;
}
.dispatch-result-poke {
  width: 20px;
  height: 20px;
  object-fit: contain;
  image-rendering: pixelated;
  flex-shrink: 0;
}
.dispatch-result-items {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
}
.dispatch-result-item {
  display: flex;
  align-items: center;
  gap: 1px;
}
.dispatch-result-item img {
  width: 14px;
  height: 14px;
  object-fit: contain;
  image-rendering: pixelated;
}
.dispatch-result-item b {
  font-family: monospace;
  font-size: 9px;
  color: var(--ui-color);
}
/* 总计行：与普通行同高，顶部虚线分隔，「总」字占宝可梦图标位 */
.dispatch-result-total {
  border-top: 1px dashed var(--ui-color);
  margin-top: 2px;
  padding-top: 2px;
}
.dispatch-result-total-label {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--ui-color);
  flex-shrink: 0;
}

/* === 经验糖果使用场景：全屏独立场景，宝可梦居中 + 数量加减 + 经验变化预览 === */
#expCandyView {
  display: none;
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  z-index: 55;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--screen-bg);
  overflow: hidden;
}
.expcandy-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.expcandy-img {
  width: 88px;
  height: 88px;
  object-fit: contain;
  image-rendering: pixelated;
  animation: expcandyIn 0.3s ease-out both; /* flex 居中场景不能用带 translateX(-50%) 的动画，会偏移半张图 */
}
@keyframes expcandyIn {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}
.expcandy-lv {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ui-color);
}
.expcandy-expbar {
  width: 120px;
  height: 5px;
  border: 1px solid rgba(var(--ui-color-rgb), 0.4);
  border-radius: 3px;
  overflow: hidden;
  background: rgba(var(--ui-color-rgb), 0.08);
}
.expcandy-expfill {
  height: 100%;
  width: 0;
  background: #2cb065;
  transition: width 0.2s;
}
.expcandy-stepper {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  color: var(--ui-color); /* 数量数字与加减按钮同色 */
}

/* 个体详情页放生按钮 */
.roster-release {
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  color: var(--ui-color);
  padding: 2px 8px;
  border: 1px solid var(--ui-color);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.roster-release:hover { background: rgba(var(--ui-color-rgb),0.12); }
.roster-release:active { transform: scale(0.92); }

/* === 开场剧情 === */
#introView {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--screen-bg);
  overflow: hidden;
}
.intro-stage {
  position: absolute;
  inset: 0;
}
/* 选角后的 tile 场景画布：铺在底部，角色站其上 */
#introSceneCanvas {
  position: absolute;
  left: 0;
  z-index: 1;
  image-rendering: pixelated;
  pointer-events: none;
}
/* 主角：walk 像素小人（16px 帧 → 1.5x），停靠左侧面向小田卷 */
.intro-player-wrap {
  position: absolute;
  left: 25%;
  bottom: 24%;
  margin-left: -12px;
}
.intro-player {
  width: 24px;
  height: 33px;
  background: url('./character/brendan-walk.png') 75% 0 no-repeat;
  background-size: 900% 100%;
  image-rendering: pixelated;
}
/* 小田卷：birch-walk.png（16px 帧 → 1.5x），停靠右侧，镜像后面向左侧主角 */
.intro-birch-wrap {
  position: absolute;
  left: 74%;
  bottom: 24%;
  margin-left: -12px;
}
.intro-birch {
  width: 24px;
  height: 31px;
  background: url('./character/birch-walk.png') 75% 0 no-repeat;
  background-size: 900% 100%;
  transform: scaleX(-1);
  image-rendering: pixelated;
}
.intro-player-wrap,
.intro-birch-wrap { opacity: 0; z-index: 2; }
/* 角色选择：角色直接贴在背景草地上，无容器框 */
.intro-title {
  font-family: monospace;
  position: absolute;
  top: 10%;
  left: 0;
  right: 0;
  z-index: 2;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--ui-color-dark);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  user-select: none;
}
.intro-pick-btn {
  position: absolute;
  bottom: 26%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  user-select: none;
}
.intro-pick-btn[data-gender="brendan"] { left: calc(25% - 60px); }
.intro-pick-btn[data-gender="may"] { right: calc(25% - 60px); }
.intro-pick-btn img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  image-rendering: pixelated;
  transition: transform 0.15s;
}
.intro-pick-btn:hover img { transform: translateY(-4px); }
.intro-pick-btn:active img { transform: scale(0.92); }
.intro-pick-btn span {
  font-size: 12px;
  font-weight: 700;
  color: var(--ui-color-dark);
}
/* 剧情结束后的开机过渡：screen-wrapper 从底部向上收缩为正方形（顶部固定、底边上移），随后恢复 UI 进入 splash */
.screen-wrapper.boot-collapse {
  transition: height 0.9s cubic-bezier(0.45, 0, 0.2, 1);
}
/* 开场剧情期间隐藏全部 UI：底部背包/统计栏与顶部 4 个应用入口按钮（保留最小化/关闭），结束后随开机动画浮现 */
body.boot-no-ui .backpack-bar { display: none; }
body.boot-no-ui .control-btn.window-icon { display: none; }

/* === 对战 App（NPC 挑战） === */
#battleContent { position: relative; display: flex; flex-direction: column; }
.battle-app {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  user-select: none;
  padding: 4px 3px;
}
#battleRefreshTip {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  padding: 2px 2px 6px;
  opacity: 0.8;
}
.battle-npc-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  min-height: 0;
  flex: 1;
  padding-right: 2px;
}
.npc-item {
  background: var(--screen-bg-light);
  border: 1px solid var(--item-border);
  border-radius: 8px;
  padding: 6px 8px;
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
}
.npc-item:hover { filter: brightness(0.97); }
.npc-item:active { transform: scale(0.98); }
.npc-info { display: flex; align-items: center; gap: 6px; }
.npc-desc { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.npc-title-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.npc-title {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  border-radius: 999px;
  padding: 1px 6px;
  line-height: 1.4;
}
.t-novice   { background: #57a86a; }
.t-veteran  { background: #4a78c9; }
.t-champion { background: #c9a13c; }
.npc-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--ui-color-dark);
}
.npc-meta {
  font-size: 9px;
  opacity: 0.6;
  margin-top: 2px;
}
.npc-reward {
  font-size: 9px;
  font-weight: 700;
  color: var(--ui-color);
  margin-top: 2px;
}
.npc-reward .candy-icon {
  width: 11px;
  height: 11px;
  image-rendering: pixelated;
  vertical-align: -2px;
}

/* 打完所有 NPC：空列表状态（提交 50 糖果强制刷新下一波） */
.battle-empty {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
}
.battle-empty-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--ui-color);
}
.battle-refresh-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1.2;
  min-width: 88px;
  border-radius: 8px;
}
.battle-refresh-btn:hover { filter: brightness(1.06); }
.battle-refresh-cost {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 9px;
  font-weight: 600;
  opacity: 0.8;
}
.battle-refresh-cost .candy-icon {
  width: 10px;
  height: 10px;
  image-rendering: pixelated;
}

/* ===== 游戏厅（21 点） ===== */
.casino-app {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  color: var(--ui-color);
  overflow: hidden; /* 防止爆牌动画溢出滚动条 */
}
/* 游戏厅首页：仿训练/饲育屋整页场景布局 + 赌桌热区 */
.casino-scene-page {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  user-select: none;
}
.casino-scene {
  position: relative;
  width: 264px;
  height: 216px;
  margin: 0 auto;
  overflow: hidden;
}
.casino-scene-canvas {
  display: block;
  width: 264px;
  height: 216px;
  image-rendering: pixelated;
}
.casino-scene-hot {
  position: absolute;
  cursor: pointer;
}
.casino-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.casino-placeholder-title {
  font-size: 14px;
  font-weight: 800;
}
.casino-placeholder-sub {
  font-size: 10px;
  opacity: 0.6;
}
/* 下注区：仿混合器布局——内容居中，开始对局 dock 贴底全宽 */
.casino-bet-area {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.casino-bet-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 0 2px;
  max-width: 300px;
  margin: 0 auto;
  width: 100%;
}
.casino-bet-label {
  font-size: 10px;
  font-weight: 700;
  opacity: 0.85;
  text-align: center;
}
/* 下注页标签行：文字居中，战绩按钮绝对定位右上角（样式与抽卡记录 .gacha-rec-btn 一致） */
.casino-bet-label-row {
  position: relative;
  text-align: center;
}
.casino-history-btn {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-family: inherit; font-size: 10px; font-weight: 700;
  padding: 2px 8px;
  border: 1px solid var(--ui-color); border-radius: 3px;
  background: transparent; color: var(--ui-color);
  cursor: pointer; letter-spacing: 0.3px;
  transition: background 0.15s, transform 0.1s;
}
.casino-history-btn:hover { background: rgba(var(--ui-color-rgb),0.12); }
.casino-history-btn:active { transform: translateY(-50%) scale(0.92); }
/* 下注档位：点击式刻度条（圆点可点击选择，选中档位上方浮出糖果 icon） */
.casino-bet-slider {
  display: flex;
  flex-direction: column;
  padding: 8px 0 0;
}
.casino-bet-slider.disabled { opacity: 0.45; pointer-events: none; }
.casino-bet-ticks {
  position: relative;
  height: 44px;
  margin: 0 40px;
}
.casino-bet-tick {
  position: absolute;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.casino-bet-coin {
  width: 15px;
  height: 15px;
  object-fit: contain;
  image-rendering: pixelated;
  opacity: 0;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}
.casino-bet-tick.sel .casino-bet-coin {
  opacity: 1;
  animation: casino-candy-pop 0.22s ease-out;
}
@keyframes casino-candy-pop {
  0% { opacity: 0; transform: scale(0.3); }
  70% { opacity: 1; transform: scale(1.25); }
  100% { opacity: 1; transform: scale(1.1); }
}
.casino-bet-dot {
  width: 12px;
  height: 12px;
  margin-top: 2px;
  border-radius: 50%;
  background: rgba(var(--ui-color-rgb), 0.45);
  border: 1.5px solid var(--ui-color);
  box-sizing: border-box;
  transition: transform 0.1s, background 0.12s, box-shadow 0.12s;
}
.casino-bet-value {
  font-size: 9px;
  font-weight: 700;
  margin-top: 3px;
  opacity: 0.55;
  white-space: nowrap;
}
.casino-bet-tick.off { cursor: default; }
.casino-bet-tick.off .casino-bet-dot,
.casino-bet-tick.off .casino-bet-value { opacity: 0.3; }
.casino-bet-tick.sel .casino-bet-dot {
  background: var(--ui-color);
  box-shadow: 0 0 0 2.5px rgba(var(--ui-color-rgb), 0.25);
}
.casino-bet-tick.sel .casino-bet-value { opacity: 1; color: var(--ui-color); }
.casino-bet-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.casino-bet-amount {
  font-size: 10px;
  opacity: 0.85;
}
.casino-bet-amount b { font-size: 12px; }
.casino-last {
  font-size: 9px;
  opacity: 0.55;
  text-align: center;
}
/* 番型参考（下注页相助区）—— 紧凑贴底，名称/倍数 + minicard 行 + 右侧翻页 */
.mj-yaku-ref {
  padding: 4px 8px;
  border: 1px solid rgba(var(--ui-color-rgb), 0.12);
  background: rgba(var(--ui-color-rgb), 0.04);
}
.mj-yaku-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}
.mj-yaku-name {
  font-size: 10px;
  font-weight: 700;
  color: var(--ui-color);
}
.mj-yaku-fans {
  font-size: 9px;
  font-weight: 700;
  color: var(--ui-color);
  background: rgba(var(--ui-color-rgb), 0.1);
  padding: 1px 5px;
  border-radius: 3px;
}
.mj-yaku-row {
  display: flex;
  align-items: center;
}
.mj-yaku-cards {
  flex: 1;
  display: flex;
  gap: 2px;
  align-items: center;
  min-height: 24px;
}
.mj-yaku-desc {
  font-size: 8px;
  color: rgba(var(--ui-color-rgb), 0.5);
  line-height: 1.3;
}
.mj-yaku-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-left: 4px;
  flex-shrink: 0;
}
.mj-yaku-nav-btn {
  width: 20px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(var(--ui-color-rgb), 0.2);
  border-radius: 3px;
  color: rgba(var(--ui-color-rgb), 0.55);
  cursor: pointer;
  padding: 0;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.mj-yaku-nav-btn:hover {
  color: var(--ui-color);
  background: rgba(var(--ui-color-rgb), 0.08);
  border-color: rgba(var(--ui-color-rgb), 0.35);
}
.mj-yaku-arrow {
  width: 9px;
  height: 9px;
}
#mjYakuPrev .mj-yaku-arrow { transform: rotate(90deg); }   /* 上翻：左箭头转向上 */
#mjYakuNext .mj-yaku-arrow { transform: rotate(-90deg); }  /* 下翻：左箭头转向下 */
/* 通用按钮（与 .battle-btn 一致规格） */
.casino-btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 16px;
  border: 1px solid var(--ui-color);
  border-radius: 999px;
  color: var(--ui-color);
  background: transparent;
  cursor: pointer;
  transition: filter 0.12s;
}
.casino-btn.main {
  background: var(--ui-color);
  color: var(--screen-bg);
}
.casino-btn:hover:not(:disabled) { background: rgba(var(--ui-color-rgb), 0.12); }
.casino-btn.main:hover:not(:disabled) { background: var(--ui-color);filter: brightness(1.08);}
.casino-btn:active:not(:disabled) { transform: scale(0.95); }
.casino-btn:disabled { opacity: 0.35; cursor: default; }
.casino-table {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 2px;
  width: 100%;
}
/* 结算横幅：悬浮在牌桌顶部，不参与布局 */
.casino-result {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  color: var(--ui-color);
  pointer-events: none;
}
.casino-result.win { color: var(--ui-color); }
.casino-result.lose { color: #e74c3c; }
/* 手牌区：占据剩余空间，牌居中，大屏不贴底 */
.casino-hands {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* 牌在区域内居中，不会因屏幕变大而贴底 */
  gap: 8px;
  width: 100%;
}
.casino-hand {
  min-height: 53px; /* label 行 + 一张牌的高度，多牌换行前牌区高度恒定 */
  display: flex;
  flex-direction: column;
  align-items: center; /* 手牌水平居中 */
  justify-content: flex-start;
}
.casino-hand-label {
  font-size: 12px;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.casino-hand-value { font-weight: normal; }
.casino-hand-value.lead { font-weight: 700; }
.casino-hand-value.bj { color: #f0d060; }
.casino-hand-value.bust { color: #e74c3c; }
.casino-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 多牌换行时整体居中 */
  align-content: flex-start;
  gap: 4px;
  min-height: 40px; /* 单行牌高固定：结算翻开暗牌、补牌都不改变牌位 */
}
.casino-card {
  box-sizing: border-box;
  width: 29px;
  height: 40px;
  border-radius: 4px;
  background: #fff;
  color: #222;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.casino-card.red { color: #d33; }
.casino-card-rank { font-size: 11px; line-height: 1; }
.casino-card-suit { font-size: 9px; line-height: 1.2; }
/* PTCG 风牌背：深蓝渐变底 + 黄色边框 + 中央精灵球图案 */
.casino-card.back {
  background: linear-gradient(135deg, #2e6db4 0%, #1c4e8f 100%);
  border: 2px solid #ffcb05;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.casino-card-back-icon {
  width: 20px;
  height: 20px;
  display: block;
}
/* 下注堆叠：左列上下两个筹码堆 */
.casino-coin-piles {
  position: absolute;
  left: 8px;
  inset: 0;
  width: 28px;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 20px 0 30px;
}
.casino-coin-pile {
  position: relative;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.casino-coin-pile-stack {
  position: absolute;
  width: 18px;
  height: 18px;
  image-rendering: pixelated;
  bottom: 0;
}
.casino-coin-pile.doubled .casino-coin-pile-stack {
  animation: casino-pile-double 0.4s ease-out;
}
@keyframes casino-pile-double {
  0% { transform: translateY(-6px) scale(1.4); }
  60% { transform: translateY(0) scale(0.9); }
  100% { transform: translateY(var(--stack-y, -2px)) scale(1); }
}
/* 发牌动画：牌从左上牌堆处飞入，轻微上抛落地（时长与发牌间隔 230ms 匹配） */
@keyframes casino-deal-in {
  0% {
    transform: translate(-90px, -60px) rotate(-10deg) scale(1.25);
    opacity: 0;
  }
  55% {
    transform: translate(5px, -5px) rotate(2deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }
}
.casino-card.dealing {
  animation: casino-deal-in 0.23s ease-out both;
}
/* 结算翻牌：庄家暗牌从牌背 180° 翻成明牌（纯 transform，不改变牌位） */
@keyframes casino-flip {
  0% {
    transform: perspective(240px) rotateY(-180deg);
    background: linear-gradient(135deg, #2e6db4 0%, #1c4e8f 100%);
    border: 2px solid #ffcb05;
  }
  55% {
    background: linear-gradient(135deg, #2e6db4 0%, #1c4e8f 100%);
    border: 2px solid #ffcb05;
  }
  100% {
    transform: perspective(240px) rotateY(0deg);
    background: #fff;
    border: 0 solid transparent;
  }
}
.casino-card.flip {
  animation: casino-flip 0.4s ease-in-out both;
}
/* 翻牌期间牌面文字跟随翻转进度淡入：转过 90°（约 50% 进度）后才出现，
   避免起步时牌背背景上透出镜像牌面 */
.casino-card.flip .casino-card-rank,
.casino-card.flip .casino-card-suit {
  animation: casino-flip-face 0.4s ease-in-out both;
}
@keyframes casino-flip-face {
  0%, 50% { opacity: 0; }
  60%, 100% { opacity: 1; }
}
.casino-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  margin-bottom: 8px;
}
/* 爆牌特效：卡片散开掉落 */
.casino-hand.busted .casino-cards { position: relative; }
.casino-hand.busted .casino-card {
  animation: casino-bust-scatter 0.8s ease-in forwards;
  position: relative;
  pointer-events: none;
}
@keyframes casino-bust-scatter {
  0% { transform: translate(0,0) rotate(0deg); opacity: 1; }
  30% { transform: translate(var(--bx, 0), var(--by, -20px)) rotate(var(--br, 0deg)); opacity: 1; }
  60% { opacity: 0.7; }
  100% { transform: translate(var(--bx, 0), calc(var(--by, -20px) + 60px)) rotate(var(--br, 0deg)); opacity: 0; }
}/* 战斗页：上下两大分区（上区对战展示 / 下区技能操作面板，分割线隔开） ---- */
.battle-fight {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* 战斗背景按 NPC 难度着色：普通绿 / 精英蓝 / 冠军金 */
.battle-fight.t-novice, .battle-result.t-novice { background: #a9dcc0; }
.battle-fight.t-veteran, .battle-result.t-veteran { background: #8fb6e0; }
.battle-fight.t-champion, .battle-result.t-champion { background: #dcc06a; }
/* 夜间模式三档 NPC 战斗背景统一为遭遇页暗色（不改 .battle-fight 上 filter，避免连内部内容一起降亮；
   难度差异仅保留在 screen 边框三色） */
[data-theme="dark"] .battle-fight.t-novice, [data-theme="dark"] .battle-result.t-novice,
[data-theme="dark"] .battle-fight.t-veteran, [data-theme="dark"] .battle-result.t-veteran,
[data-theme="dark"] .battle-fight.t-champion, [data-theme="dark"] .battle-result.t-champion {
  background: var(--screen-bg);
}
/* 战斗期间屏幕边框按 NPC 难度着色（.screen 的 t- 类由战斗页挂载/清除） */
.screen.t-novice { border-color: #57a86a; }
.screen.t-veteran { border-color: #4a78c9; }
.screen.t-champion { border-color: #c9a13c; }
.battle-stage-top {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding:10px 0;
}
.b-enemy-box,
.b-player-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 50px;
  flex-shrink: 0;
}
.b-enemy-box .b-panel,
.b-player-box .b-panel {
  background: rgba(255, 255, 255, 0.32);
  padding: 4px 8px;
  min-width: 0;
}
.b-enemy-box .b-panel {
  border-radius: 0 4px 4px 0;
}
.b-player-box .b-panel {
  border-radius: 4px 0 0 4px;
}
.b-enemy-box img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  flex-shrink: 0;
  margin: 8px 14px 0 0; /* 与右上角留出间距 */
}
.b-player-box img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  flex-shrink: 0;
  margin: 0 8px 14px 0; /* 与左下角留出间距 */
}
.b-base {
  position: absolute;
  z-index: 0;
  width: 46px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #57a86a;
  background: rgba(87, 168, 106, 0.3);
  pointer-events: none;
}
/* 底座颜色随 NPC 难度：普通绿 / 精英蓝 / 冠军金 */
.battle-fight.t-veteran .b-base { border-color: #4a78c9; background: rgba(74, 120, 201, 0.3); }
.battle-fight.t-champion .b-base { border-color: #c9a13c; background: rgba(201, 161, 60, 0.3); }
#be-base { right: 33px; top: 48px; transform: translate(50%, -50%); }
#bp-base { left: 28px; top: 36px; transform: translate(-50%, -50%); }
.b-enemy-box img { position: relative; z-index: 1; } /* 精灵盖在底座上层（我方 .b-flip 自带 transform 叠层） */
.b-player-box .b-info { align-items: flex-end; }
.b-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0; /* 允许在窄屏下收缩，避免信息面板撑破屏幕右边界 */
}
/* 名字/等级一行，属性标签另起一行；行宽与血条一致保证名字与血条左端对齐 */
.b-meta-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 96px;
  max-width: 100%;
}
.b-name-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  gap: 4px;
}
.b-name {
  font-size: 11px;
  font-weight: 500;
  color: var(--ui-color-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.b-lv {
  font-size: 9px;
  font-weight: 500;
  color: var(--ui-color-dark);
  opacity: 0.8;
  flex-shrink: 0;
}
.b-types { display: flex; flex-wrap: wrap; gap: 3px; flex-shrink: 0; }
.b-type {
  font-size: 7px;
  font-weight: 500;
  color: #fff;
  border-radius: 999px;
  padding: 1px 5px;
  line-height: 1.3;
}
/* 战斗属性 + 状态圆点容器 */
.b-status-area { display: inline-flex; align-items: center; gap: 3px;cursor: pointer; }
/* 异常状态圆点：属性后的小圆点，hover 用自制 tooltip 显示状态名 */
.b-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.18);
}
.b-hp {
  width: 96px;
  max-width: 100%;
  height: 5px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid #fff;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 1px;
}
.b-hp i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 3px;
  transition: width 0.25s ease;
}
/* 血条过渡开关：连击逐段扣血时先瞬时定位再过渡 */
.b-hp i.no-trans { transition: none; }
/* 夜间模式战斗面板：白底改浅色叠加，名字/等级提亮避免与暗色战斗背景撞色 */
[data-theme="dark"] .b-enemy-box .b-panel,
[data-theme="dark"] .b-player-box .b-panel { background: var(--item-bg); }
[data-theme="dark"] .b-name,
[data-theme="dark"] .b-lv { color: var(--color-text); }
[data-theme="dark"] .b-hp { background: rgba(0, 0, 0, 0.5); border-color: rgba(255, 255, 255, 0.45); }
[data-theme="dark"] .b-status-dot { border-color: rgba(255, 255, 255, 0.25); }
/* 队伍剩余数量：精灵球图标，剩几只显示几个 */
.b-team {
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 12px;
  min-width: 0;
  flex-wrap: wrap;
}
.b-ball {
  width: 11px;
  height: 11px;
  color: var(--ui-color-dark);
  flex-shrink: 0;
}
/* 底部操作区：左栏文案/技能 + 右栏操作/技能详情（高度对齐遭遇界面文案框） */
.b-bottom {
  flex-shrink: 0;
  height: 56px;
  display: flex;
  position: relative; /* 自动战斗遮罩定位基准 */
  background: var(--console-body);
  border-top: 2px solid var(--console-border);
  z-index: 3;
}
/* 自动战斗遮罩：覆盖底部文案区，右下角闪烁提示，点击恢复手动 */
.b-auto-mask {
  position: absolute;
  inset: 0;
  display: none;
  align-items: flex-end;
  justify-content: flex-end;
  background: rgba(0, 0, 0, 0.1);
  z-index: 6;
  cursor: pointer;
}
.b-auto-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--ui-color-dark);
  padding: 2px 10px 5px 0;
  animation: autoBlink 1.2s ease-in-out infinite;
}
@keyframes autoBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
/* 对战记录页：全屏覆盖战斗界面（遮住全部按钮 = 锁 UI），滚动列出本次对战日志 */
.b-log-page {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  background: var(--screen-bg-light);
  text-align: left;
  padding: 4px 6px;
}

/* === 记录列表统一样式（抽卡记录/战绩/系统日志/孵蛋记录/对战记录） === */
.rec-view {
  display: none;
  flex-direction: column;
  overflow: hidden;
  padding: 4px 6px;
  align-self: stretch;
  margin-bottom: auto;
}
.rec-header {
  border-bottom: 1px solid var(--ui-color);
  margin-bottom: 3px;
  font-size: 10px;
}
.rec-empty {
  padding: 12px 4px;
  text-align: center;
  font-size: 11px;
  color: var(--color-muted);
}
.rec-row {
  font-size: 10px;
  line-height: 1.8;
  padding: 1px 0;
  display: flex;
  align-items: baseline;
}
.rec-time {
  opacity: 0.6;
  margin-right: 12px;
  flex-shrink: 0;
}
.rec-badge {
  font-size: 8px;
  padding: 0 3px;
  border-radius: 2px;
  color: #fff;
  margin: 0 8px;
  min-width: 18px;
  text-align: center;
  display: inline-block;
}
.rec-main { flex: 1; }
.rec-right {
  flex-shrink: 0;
  margin-left: 14px;
}
/* 对战记录行：圆点指示器 */
.b-log-page .rec-row {
  align-items: flex-start;
  gap: 5px;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
  padding: 2px 0;
  color: var(--ui-color);
}
.rec-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-top: 4px;
}
.b-log-page .rec-row.p .rec-dot { background: #38926e; }
.b-log-page .rec-row.e .rec-dot { background: #c57373; }
.b-log-page .rec-row.n .rec-dot { background: #73b7c5; }
.b-log-page .rec-row .rec-main { min-width: 0; word-break: break-all; }
.b-log-page .rec-row .rec-main b { font-weight: 800; color: var(--ui-color-dark); }
.b-log-page .rec-row .rec-main .b-move-type { margin-right: 2px; vertical-align: -1px; }
.b-left {
  flex: 3;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 3px 5px;
}
.b-right {
  flex: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 3px 5px;
  border-left: 2px solid var(--console-border);
}
/* 招式区：2×2 技能按钮 */
.b-cmd {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 3px;
}
.b-move {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
  min-width: 0;
  padding: 3px 4px;
  background: var(--console-body);
  border: 1px solid var(--console-border);
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, transform 0.08s;
}
.b-move:hover { filter: brightness(1.1); }
.b-move:active { transform: scale(0.95); }
.b-move.disabled { opacity: 0.4; cursor: default; }
.b-move.disabled:active { transform: none; }
.b-move-name {
  flex: 1;
  min-width: 0;
  font-size: 8.5px;
  font-weight: 700;
  color: var(--ui-color-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 属性标签：类型色圆形底 + 白色属性图标（取自 sprites.svg 的 icon-type-* symbol） */
.b-move-type {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.b-move-type-icon {
  width: 8px;
  height: 8px;
  color: #fff;
}
/* 招式详情 PP 耗尽红色 */
.b-pp-zero { color: #e74c3c; }
/* 战斗文案 */
.b-text {
  flex-shrink: 0;
  font-family: monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--ui-color);
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-all;
}
/* 右栏操作按钮 */
/* 右栏上半：攻击/宝可梦/撤退 水平排列 */
.b-actions {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
/* 选招时右栏切换为：招式详情 + 返回按钮 */
.b-actions.detail {
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}
.b-actions.detail .b-act {
  flex: none;
  height: 18px;
}
/* 选招底部行：左侧克制提示小字，右侧返回按钮 */
.b-act-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  min-height: 18px;
}
.b-eff-hint {
  font-size: 8px;
  font-weight: 700;
  color: var(--ui-color);
}
.b-eff-hint.weak { color: #434644; }
.b-eff-hint.no { color: #d73939; }
.b-eff-hint.strong { color: #66c566; }
.b-move-detail {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  font-size: 9px;
  font-weight: 700;
  color: var(--ui-color);
}
/* hover 招式详情：两列——左列属性/类型，右列威力/命中 */
.b-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 8px;
}
.b-detail-col { display: flex; flex-direction: column; gap: 2px; }
.b-detail-line { line-height: 1.5; font-size: 8px; }
.b-detail-line span { opacity: 0.7; margin-right: 3px; }
.b-detail-line b { opacity: 0.7; font-weight: 600; display: inline-flex; align-items: center; }
.b-act {
  flex: 1;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  color: var(--ui-color);
  border: 1px solid var(--ui-color);
  border-radius: 6px; /* 与文案区域技能按钮 .b-move 保持一致 */
  padding: 0 8px;
  background: transparent;
  cursor: pointer;
  transition: background 0.12s, transform 0.08s;
}
.b-act:hover { background: rgba(var(--ui-color-rgb), 0.1); }
.b-act:active { transform: scale(0.94); }
.b-act.auto { border-color: #a06161; color: #a06161; flex: none; }
.b-act.auto:hover { background: rgba(100, 97, 97, 0.12); }
.b-right-info {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}
.b-npc-name {
  flex: 1;
  min-width: 0;
  font-size: 8px;
  font-weight: 700;
  color: var(--ui-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.b-round {
  font-size: 8px;
  font-weight: 700;
  color: var(--ui-color);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---- 结算页 ---- */
.battle-result {
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  position: relative;
}
.battle-result-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--ui-color-dark);
}
.battle-result-detail {
  font-size: 11px;
  line-height: 1.8;
  color: var(--ui-color);
  max-height: 150px;
  overflow-y: auto;
  padding: 0 8px;
}
/* 经验加成：随从 battleexp 类，结算 label 后追加黄色附加经验 */
.exp-bonus {
  color: #e0b32e;
  font-weight: 700;
}
.candy-gain {
  font-size: 12px;
  font-weight: 800;
  color: var(--ui-color-dark);
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.candy-gain .candy-icon {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
  vertical-align: -2px;
}
.battle-result-btns {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.battle-btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--ui-color);
  border: 1px solid var(--ui-color);
  border-radius: 999px;
  padding: 6px 16px;
  background: transparent;
  cursor: pointer;
}
.battle-btn.main {
  background: var(--ui-color);
  color: var(--screen-bg);
}
.battle-btn:active { transform: scale(0.95); }

/* === 配队 App === */
.team-app {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* 底部预留 32px 给交换提示条（绝对定位浮层），避免压缩上方卡片 */
  padding: 4px 3px 32px;
  user-select: none;
}
.team-party {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 6px 8px;
}
.team-member {
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: stretch;
  gap: 5px;
  padding: 2px 6px;
  border-radius: 8px;
  background: var(--item-bg);
  border: 1px solid var(--item-border);
  cursor: pointer;
  touch-action: none; /* 允许指针拖拽换位（鼠标/触摸） */
}
.team-member:hover {
  opacity: 0.8;
}
.team-member.empty {
  opacity: 0.45;
}
.team-member.empty:hover {
  opacity: 0.6;
}
/* 左侧图标列：占满整行高度 */
.team-member .member-icon {
  align-self: stretch;
  width: 26px;
  flex-shrink: 0;
  object-fit: contain;
  image-rendering: pixelated;
}
.team-member .member-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
}
.team-member .member-top {
  min-width: 0;
}
.team-member .member-name {
  font-size: 11px;
  font-weight: 800;
  color: var(--ui-color-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 第二行：左等级 / 右经验数值 */
.team-member .member-mid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  min-width: 0;
}
.team-member .member-lv {
  font-size: 8px;
  font-weight: 700;
  color: var(--ui-color);
}
/* 第三行：XP 标签 + 全宽 XP 条，条宽不受名字长度影响 */
.team-member .member-xp-row {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
}
.team-member .xp-bar {
  height: 4px;
}
.team-member .member-empty {
  font-size: 10px;
  color: var(--ui-color);
  opacity: 0.45;
}
/* XP 通用元素：标签 / 进度条 / 数值 */
.xp-label {
  flex-shrink: 0;
  font-size: 8px;
  font-weight: 800;
  color: var(--ui-color);
}
.xp-bar {
  flex: 1;
  min-width: 0;
  height: 5px;
  background: rgba(var(--ui-color-rgb), 0.15);
  border-radius: 2px;
  overflow: hidden;
}
.xp-fill {
  height: 100%;
  background: var(--ui-color);
}
.xp-nums {
  font-size: 8px;
  font-weight: 700;
  color: var(--ui-color);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* 空槽：虚线边框，居中显示「空」 */
.team-member.empty {
  border-style: dashed;
  justify-content: center;
  align-items: center;
}
/* 菜单归属槽位高亮 */
.team-member.menu-open {
  background: rgba(var(--ui-color-rgb), 0.16);
  border-color: var(--ui-color);
}
/* 派遣槽位菜单归属高亮（复用配队菜单样式） */
.incubator-row.menu-open {
  background: rgba(var(--ui-color-rgb), 0.16);
  border-color: var(--ui-color);
}
/* 拖拽换位：源槽位压暗 + 目标槽位高亮 */
.team-member.dragging {
  opacity: 0.4;
}
.team-member.drag-over {
  background: rgba(var(--ui-color-rgb), 0.16);
  border-color: var(--ui-color);
  border-style: dashed;
}
/* 拖拽幽灵卡片：跟随指针的图标 + 名字 */
.team-drag-ghost {
  position: absolute;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  background: var(--screen-bg-light);
  border: 1px solid var(--ui-color);
  border-radius: 6px;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.team-drag-ghost img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  image-rendering: pixelated;
}
.team-drag-ghost-name {
  font-size: 10px;
  font-weight: 800;
  color: var(--ui-color-dark);
  white-space: nowrap;
}
/* 战斗中替换：不可上场（已倒下/当前场上）的成员置灰 */
.team-member.swap-disabled {
  opacity: 0.45;
  pointer-events: none;
}
.team-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px 6px;
  background: var(--console-body);
  border-top: 2px solid var(--console-border);
}
.team-footer-text {
  flex: 1;
  min-width: 0;
  font-family: monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--ui-color);
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.team-footer-btn {
  flex-shrink: 0;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  color: var(--ui-color);
  border: 1px solid var(--ui-color);
  border-radius: 999px;
  padding: 1px 8px;
  background: transparent;
  cursor: pointer;
}
.team-footer-btn:hover { background: rgba(var(--ui-color-rgb), 0.1); }
.team-footer-btn:active { transform: scale(0.94); }

/* 槽位操作菜单（查看/替换/交换/移除）：点击位置弹出 */
/* ---------- 配队：队伍列表页（6 组队伍预览，2 列 × 3 行，仿孵蛋器卡片） ---------- */
.team-list-hint {
  font-size: 10px;
  color: var(--ui-color);
  padding: 4px 6px 2px;
  opacity: 0.8;
}
.team-list-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 6px 8px;
  padding: 4px 3px 8px;
}
.team-list-card {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  background: var(--item-bg);
  border: 1px solid var(--item-border);
  padding: 3px 5px;
  cursor: pointer;
  user-select: none;
}
.team-list-card:hover { border-color: rgba(var(--ui-color-rgb), 0.45); }
.team-list-card.active { border-color: var(--ui-color); background: rgba(var(--ui-color-rgb), 0.12); }
.team-card-head {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.team-card-name {
  font-size: 10px;
  font-weight: 800;
  color: var(--ui-color-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: text;
}
.team-card-rename {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: var(--ui-color);
  opacity: 0.55;
  cursor: pointer;
}
.team-card-rename:hover { opacity: 1; }
.team-card-preview {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px 0;
}
.team-card-mon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.team-card-mon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
.team-card-mon.empty {
  border: 1px solid rgba(var(--ui-color-rgb), 0.12);
  border-radius: 2px;
}
.team-card-mon.shiny img { filter: drop-shadow(0 0 2px #fff); }
.team-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.team-card-count {
  font-size: 9px;
  color: var(--ui-color);
  opacity: 0.7;
}
.team-card-set {
  flex-shrink: 0;
  font-size: 9px;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid rgba(var(--ui-color-rgb), 0.4);
  background: transparent;
  color: var(--ui-color);
  cursor: pointer;
  transition: background 0.12s;
}
.team-card-set:hover { background: rgba(var(--ui-color-rgb), 0.12); }
.team-card-set:active { transform: scale(0.94); }
.team-card-set.on {
  border-color: var(--ui-color);
  background: rgba(var(--ui-color-rgb), 0.22);
  font-weight: 800;
  cursor: default;
}
.team-name-input {
  flex: 1;
  min-width: 0;
  align-self: stretch;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  color: var(--ui-color-dark);
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--ui-color);
  border-radius: 3px;
  padding: 0 3px;
  outline: none;
  box-sizing: border-box;
}

.team-menu {
  position: absolute;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 56px;
  padding: 3px;
  background: var(--screen-bg-light);
  border: 1px solid var(--ui-color);
  border-radius: 4px;
}
.team-menu button {
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  color: var(--ui-color);
  background: transparent;
  border: none;
  border-radius: 3px;
  padding: 4px 8px;
  text-align: left;
  cursor: pointer;
}
.team-menu button:hover { background: rgba(var(--ui-color-rgb), 0.15); }
.team-menu button:active { transform: scale(0.96); }

/* 拖拽移除停靠区：全宽底部横条，拖入即移除 */
.team-trash-dock {
  position: absolute;
  left: 3px;
  right: 3px;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 28px;
  border: 1px dashed var(--item-border);
  border-radius: 7px;
  background: var(--item-bg);
  color: var(--ui-color);
  opacity: 0.55;
  transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  font-size: 10px;
  font-weight: 700;
}
.team-trash-dock.active {
  opacity: 0.95;
}
.team-trash-dock.remove-over {
  opacity: 1;
  color: #e74c3c;
  background: rgba(231, 76, 60, 0.14);
  border-color: #e74c3c;
}
#teamContent { position: relative; display: flex; flex-direction: column; }

/* === 训练 App === */
#trainView { position: relative; }
.train-app {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  user-select: none;
}
/* 训练场 tile 地图 + 告示牌入口 */
.train-field {
  position: relative;
  width: 264px;
  height: 216px;
  margin: 0 auto;
  overflow: hidden;
}
.train-field-canvas {
  display: block;
  width: 264px;
  height: 216px;
  image-rendering: pixelated;
}
/* 场地上的训练宝可梦：随机走动 + 上下弹跳（转向用镜像） */
.train-walkers {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 10; /* 高于告示牌/纸箱（8），宝可梦走动时不被入口图标盖住 */
  pointer-events: none;
}
.train-walker {
  position: absolute;
  width: 32px;
  height: 32px;
  pointer-events: auto;
  transition: left 0.5s linear, top 0.5s linear;
}
/* 偷懒中的宝可梦：光标提示可点击（grab）叫醒 */
.train-walker.lazy { cursor: grab; }
.train-walker.lazy:active { cursor: grabbing; }
.train-walker-flip {
  width: 100%;
  height: 100%;
  transform-origin: center;
}
.train-walker-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  animation: pokeJump 0.7s steps(1, end) infinite;
}
/* 偷懒中的宝可梦：停止上下跳动画，原地待着 */
.train-walker-img.lazy {
  animation: none;
}
/* 停下休息的宝可梦：停止跳动并保持落底姿势（move 帧动画不受影响） */
.train-walker-img.idle {
  animation: none;
}
.train-walker-img.idle:not(.move) {
  transform: translateY(5px);
}
/* 使用移动帧动画的宝可梦：彻底停用上下跳动，行走切帧、静止保持帧 */
.train-walker-img.move {
  animation: none;
}
/* 偷懒睡觉粒子：三个 z 从头顶错开上飘、放大淡出循环（仅偷懒时显示） */
.train-walker-zzz {
  position: absolute;
  left: 50%;
  top: -12px;
  width: 0;
  height: 0;
  z-index: 6;
  pointer-events: none;
  display: none;
}
.train-walker.lazy .train-walker-zzz { display: block; }
.train-walker-zzz i {
  position: absolute;
  left: -6px;
  top: 0;
  font-style: normal;
  font-weight: 900;
  font-size: 9px;
  line-height: 1;
  color: #fff;
  opacity: 0;
  animation: trainZzz 2.4s ease-out infinite;
}
.train-walker-zzz i:nth-child(1) { animation-delay: 0s; }
.train-walker-zzz i:nth-child(2) { animation-delay: 0.8s; }
.train-walker-zzz i:nth-child(3) { animation-delay: 1.6s; }
@keyframes trainZzz {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.6); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: translate(10px, -30px) scale(1.6); }
}
.train-board-sign {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 8;
  width: 30px;
  height: 30px;
  object-fit: contain;
  image-rendering: pixelated;
  cursor: pointer;
  transition: transform 0.1s;
}
.train-board-sign:hover { transform: scale(1.08); }
.train-board-sign:active { transform: scale(0.92); }
/* 场地角落树果箱：训练消耗的树果库存入口 */
.train-box-sign {
  position: absolute;
  top: 15px;
  right: 45px;
  z-index: 8;
  width: 25px;
  height: 25px;
  object-fit: contain;
  image-rendering: pixelated;
  cursor: pointer;
  transition: transform 0.1s;
}
.train-box-sign:hover { transform: scale(1.08); }
.train-box-sign:active { transform: scale(0.92); }
/* 训练面板：顶部一行 6 个槽位格 + 底部状态进度区 */
.train-cell-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  padding: 6px 6px 4px;
}
.train-cell {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 5px 2px;
  border: 1px solid rgba(var(--ui-color-rgb), 0.3);
  border-radius: 5px;
  background: var(--item-bg);
  font-size: 9px;
  font-weight: 600;
  color: var(--ui-color);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.15s;
}
.train-cell:hover { background: var(--item-hover-bg); }
.train-cell-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  object-fit: contain;
  image-rendering: pixelated;
}
.train-cell.empty {
  border-style: dashed;
  opacity: 0.5;
  font-size: 12px;
}
.train-cell.lazy { background: rgba(0, 0, 0, 0.08); }
.train-status-empty {
  padding: 8px 6px;
  font-size: 10px;
  color: var(--ui-color);
  text-align: center;
  opacity: 0.6;
}
/* 树果库存面板顶部的喂食说明 */
.train-stock-note {
  padding: 2px 8px 4px;
  font-size: 9px;
  color: var(--ui-color);
  opacity: 0.75;
}
.train-status-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 2px 6px 6px;
}
.train-status-row {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.12);
  min-width: 0;
}
.train-status-name {
  flex: 0 0 76px;
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  font-size: 9px;
  font-weight: 600;
  color: var(--ui-color);
  white-space: nowrap;
}
.train-status-name-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.train-status-name .train-status-g { flex: 0 0 12px; font-style: normal; }
.train-status-sat-num { flex: 0 0 auto; text-align: left; font-style: normal; }
.train-status-xp {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 8px;
  font-weight: 700;
  color: var(--ui-color);
  font-variant-numeric: tabular-nums;
}
.train-status-xp-lv { flex: 0 0 auto; text-align: left; font-style: normal; }
.train-status-bar {
  flex: 1;
  min-width: 0;
  height: 4px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.14);
  overflow: hidden;
}
.train-status-bar .xp-fill {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--ui-color);
  transition: width 0.3s;
}
/* 训练状态点：训练中绿色 / 偷懒中灰色，位于行首名字前 */
.train-status-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2cb065;
}
.train-status-dot.lazy { background: var(--color-muted); }
/* 饱食度：迷你进度条 + 数值，颜色随饥饿程度变化（满/中/低） */
.train-status-satiety {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 8px;
  font-weight: 700;
  color: var(--ui-color);
  font-variant-numeric: tabular-nums;
}
.train-status-sat-track {
  flex: 1;
  min-width: 0;
  height: 4px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.14);
  overflow: hidden;
}
.train-status-sat-fill {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: #2cb065;
  transition: width 0.3s;
}
.train-status-satiety.mid .train-status-sat-fill { background: #e0a33c; }
.train-status-satiety.low .train-status-sat-fill { background: #e0503c; }
.train-status-satiety em { font-style: normal; }
/* 场地宝可梦 hover 提示（样式对齐农场树果提示） */
.train-walker-tip {
  position: fixed;
  z-index: 9999;
  background: var(--screen-bg-dark);
  color: #fff;
  font-size: 10px;
  line-height: 1.5;
  padding: 3px 6px;
  border-radius: 3px;
  white-space: nowrap;
  pointer-events: none;
}
.train-walker-tip-status { margin-left: 5px; font-weight: 700; }
.train-walker-tip-status.lazy { color: #ffd18a; }

/* === 饲育屋 App === */
#nurseryView { position: relative; font-size: 11px; color: var(--ui-color); }
.nursery-app {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  user-select: none;
}
/* 饲育屋 tile 地图 + 告示牌入口 */
.nursery-field {
  position: relative;
  width: 264px;
  height: 216px;
  margin: 0 auto 0 -8px;
  overflow: hidden;
}
.nursery-field-canvas {
  display: block;
  width: 264px;
  height: 216px;
  image-rendering: pixelated;
}
/* 场地上的亲本：随机走动 + 上下弹跳（转向用镜像） */
.nursery-walkers {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 10; /* 高于告示牌/纸箱（9），宝可梦走动时不被入口图标盖住 */
  pointer-events: none;
}
.nursery-walker {
  position: absolute;
  width: 32px;
  height: 32px;
  z-index: 8;
  pointer-events: auto;
  transition: left 0.5s linear, top 0.5s linear;
}
.nursery-walker-flip {
  width: 100%;
  height: 100%;
  transform-origin: center;
}
.nursery-walker-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  animation: pokeJump 0.7s steps(1, end) infinite;
}
/* 使用移动帧动画的亲本：彻底停用上下跳动，行走切帧、静止保持帧 */
.nursery-walker-img.move {
  animation: none;
}
/* 停下休息的亲本：停止跳动并保持落底姿势（move 帧动画不受影响） */
.nursery-walker-img.idle {
  animation: none;
}
.nursery-walker-img.idle:not(.move) {
  transform: translateY(5px);
}
/* 繁殖中亲本头顶的爱心粒子：♥ 上浮放大淡出（与战斗着迷同款表现，错峰飘散） */
.nursery-walker-fx {
  position: absolute;
  left: 50%;
  top: -8px;
  z-index: 6;
  pointer-events: none;
}
.nursery-walker-fx i {
  position: absolute;
  font-style: normal;
  font-size: 11px;
  color: #ff6fa5;
  text-shadow: 0 0 4px rgba(255, 111, 165, 0.55);
  animation: nurseryHeart 1.8s ease-out infinite;
}
@keyframes nurseryHeart {
  0% { opacity: 0; transform: translateY(6px) scale(0.5) rotate(-14deg); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-24px) scale(1.25) rotate(14deg); }
}
/* 告示牌：点击弹出配对面板（层级高于行走宝可梦） */
.nursery-board-sign {
  position: absolute;
  top: 15px; right: 15px;
  z-index: 9;
  width: 30px; height: 30px;
  object-fit: contain; image-rendering: pixelated;
  cursor: pointer;
  transition: transform 0.1s;
}
.nursery-board-sign:hover { transform: scale(1.08); }
.nursery-board-sign:active { transform: scale(0.92); }

/* 纸箱子：告示牌镜像位置（左上角），层级高于行走宝可梦 */
.nursery-box-sign {
  position: absolute;
  top: 20px; left: 20px;
  z-index: 9;
  width: 25px; height: 25px;
  object-fit: contain; image-rendering: pixelated;
  cursor: pointer;
  transition: transform 0.1s;
}
.nursery-box-sign:hover { transform: scale(1.08); }
.nursery-box-sign:active { transform: scale(0.92); }
.nursery-panel { max-height: 97%; }

/* 蛋仓库 */
.nursery-egg-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 0 6px 4px;
  box-sizing: border-box;
}
.nursery-egg-page .list-scroll { overflow-x: hidden; }
/* 标题后跟的小字（目标蛋组） */
.nursery-pick-egggroup {
  font-size: 10px;
  font-weight: 600;
  color: var(--ui-color);
  opacity: 0.72;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 4px;
}

.nursery-pick-list .bounty-trade-row[data-pick-view] { cursor: pointer; }
.nursery-pick-list .bounty-trade-row[data-pick-view]:hover { background: rgba(255, 255, 255, 0.22); }
.nursery-pick-list .roster-iv[data-tip] { cursor: pointer; }
/* 放入按钮靠右缘：清掉通用样式的右侧留白，贴列右边界 */
.nursery-pick-list .bounty-trade-btn-col { width: 44px; padding-right: 2px; }
.nursery-pick-list .bounty-trade-btn { margin-right: 0; }
/* 放入列表个体值筛选面板：6 列（每列个体值项 + 5 个档位），固定屏幕居中显示 */
.nursery-iv-dd {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: none;
  overflow: visible;
  min-width: 250px;
  z-index: 9999;
}
.nursery-iv-panel {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  padding: 4px;
}
.nursery-iv-col {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-radius: 2px;
  padding: 1px;
  cursor: pointer;
}
.nursery-iv-col.active { background: rgba(var(--ui-color-rgb),0.12); }
.nursery-iv-col-head {
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  padding: 2px 0 3px;
}
.nursery-iv-lvl {
  font-size: 9px;
  text-align: center;
  padding: 1px 2px;
  border-radius: 2px;
  cursor: pointer;
  color: var(--ui-color);
  opacity: 0.75;
}
.nursery-iv-lvl:hover { background: rgba(var(--ui-color-rgb),0.1); opacity: 1; }
.nursery-iv-lvl.active { background: rgba(var(--ui-color-rgb),0.16); font-weight: 700; opacity: 1; }
/* 配对面板：两个亲本槽位 + 配对状态 */
.nursery-pair-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 4px 4px;
}
.nursery-pair-plus {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--ui-color);
  opacity: 0.5;
}
.nursery-slot {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px;
  border: 1px solid rgba(var(--ui-color-rgb), 0.3);
  border-radius: 5px;
  background: var(--item-bg);
  cursor: pointer;
  transition: background 0.15s;
}
.nursery-slot:hover { background: var(--item-hover-bg); }
/* 夜间模式：列表行白底 hover 过亮，单独降档 */
[data-theme="dark"] .nursery-pick-list .bounty-trade-row[data-pick-view]:hover { background: rgba(255, 255, 255, 0.1); }
.nursery-slot.empty {
  border-style: dashed;
  opacity: 0.5;
  font-size: 13px;
  justify-content: center;
  min-height: 34px;
}
.nursery-slot-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  object-fit: contain;
  image-rendering: pixelated;
}
.nursery-slot-info { min-width: 0; }
.nursery-slot-name {
  display: flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--ui-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nursery-slot-name em {
  font-style: normal;
  opacity: 0.8;
  margin-left: 1px;
}
.nursery-slot-egg {
  font-size: 8px;
  color: var(--ui-color);
  opacity: 0.65;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 配对状态空态提示 */
.nursery-pair-status {
  margin: 2px 8px 8px;
  padding: 6px 8px;
  border-radius: 5px;
  font-size: 10px;
  line-height: 1.6;
  color: var(--ui-color);
  background: rgba(255, 255, 255, 0.08);
  opacity: 0.8;
}
/* 配对预览：第一行双方个体值一左一右，第二行后代名字+个体值；个体值 hover 看六维明细 */
.nursery-pair-result {
  margin: 2px 8px 8px;
  padding: 6px 8px;
  border-radius: 5px;
  background: var(--item-bg);
  font-size: 10px;
  color: var(--ui-color);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nursery-pair-ivs {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nursery-pair-iv {
  white-space: nowrap;
  font-variant-numeric: tabular-nums; /* 斜杠串数字等宽，两侧对齐美观 */
}
.nursery-pair-iv.left { text-align: left; }
.nursery-pair-iv.right { text-align: right; }
.nursery-pair-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 4px;
  border-top: 1px solid rgba(var(--ui-color-rgb), 0.15);
}
.nursery-pair-child-name {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 锁定遗传个体：label 独占一行，六个按钮均分一行 */
.nursery-pair-lock {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0 8px 8px;
  padding: 5px 8px;
  border-radius: 5px;
  background: var(--item-bg); /* 与下方配对预览背景一致 */
  font-size: 10px;
  color: var(--ui-color);
}
.nursery-pair-lock-label {
  opacity: 0.8;
  white-space: nowrap;
}
.nursery-pair-lock-btns {
  display: flex;
  gap: 4px;
}
.nursery-pair-lock-btn {
  flex: 1; /* 六项均分，单行铺满面板宽度 */
  border: 1px solid rgba(var(--ui-color-rgb), 0.35);
  border-radius: 3px;
  background: transparent;
  color: var(--ui-color);
  font-size: 9px;
  line-height: 1;
  padding: 3px 0;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.nursery-pair-lock-btn:hover { border-color: var(--ui-color); }
.nursery-pair-lock-btn.on {
  background: rgba(var(--ui-color-rgb), 0.25);
  border-color: var(--ui-color);
  font-weight: 700;
}
/* 锁定位来源切换：母方/父方二选一，固定继承所选亲本 */
.nursery-pair-lock-srcs {
  display: flex;
  gap: 4px;
  align-items: center;
}
.nursery-pair-lock-src-label {
  font-size: 10px;
  opacity: 0.7;
  white-space: nowrap;
}
.nursery-pair-lock-src {
  flex: 1;
  min-width: 0;
  border: 1px solid rgba(var(--ui-color-rgb), 0.35);
  border-radius: 3px;
  background: transparent;
  color: var(--ui-color);
  font-size: 9px;
  padding: 2px 3px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nursery-pair-lock-src:hover { border-color: var(--ui-color); }
.nursery-pair-lock-src.on {
  background: rgba(var(--ui-color-rgb), 0.25);
  border-color: var(--ui-color);
  font-weight: 700;
}
/* 后代个体值区间预览：六维 3x2，锁定位定值 / 遗传位 min~max / 随机位 0~31 */
.nursery-pair-preview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px 8px;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(var(--ui-color-rgb), 0.15);
}
.npv-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.npv-dim { font-size: 10px; opacity: 0.7; white-space: nowrap; }
.npv-range {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.npv-range.locked { font-weight: 600; }
.npv-range.rot-on { color: var(--ui-color); font-weight: 600; }
/* M2 繁殖区：树果需求 + 开始按钮 / 进度条 / 收取蛋 */
.nursery-breed {
  margin: 0 8px 8px;
  padding: 6px 8px;
  border-radius: 5px;
  background: var(--item-bg);
  font-size: 10px;
  color: var(--ui-color);
}
.nursery-breed-demand {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
/* 连续繁殖轮数选择 */
.nursery-breed-rounds {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.nursery-round-btn {
  width: 18px;
  height: 18px;
  border: 1px solid rgba(var(--ui-color-rgb), 0.35);
  border-radius: 3px;
  background: transparent;
  color: var(--ui-color);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s;
}
.nursery-round-btn:hover { border-color: var(--ui-color); }
.nursery-round-num {
  min-width: 22px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.nursery-breed-demand-label {
  opacity: 0.8;
  white-space: nowrap;
}
.nursery-breed-item {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-variant-numeric: tabular-nums;
}
.nursery-breed-item img {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
}
.nursery-breed-item.lack {
  color: #ff7b7b;
}
.nursery-breed-btn {
  width: 100%;
  border: 1px solid rgba(var(--ui-color-rgb), 0.35);
  border-radius: 3px;
  background: transparent;
  color: var(--ui-color);
  font-size: 10px;
  line-height: 1;
  padding: 6px 0;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.nursery-breed-btn:hover { border-color: var(--ui-color); }
.nursery-breed-btn.locked {
  opacity: 0.55;
  cursor: not-allowed;
}
.nursery-breed-bar {
  height: 7px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  overflow: hidden;
}
.nursery-breed-fill {
  height: 100%;
  background: var(--ui-color);
  border-radius: 4px;
  transition: width 0.5s linear;
}
.nursery-breed-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.nursery-breed-note {
  margin-top: 3px;
  opacity: 0.7;
}

/* ==================== 口袋麻将 ==================== */
/* 四家圆桌布局：对家横向/左右竖向/玩家横向；中央明宝牌→局况→牌河→操作提示 */
#mahjongView .mahjong-app {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}
#mahjongView .mj-table {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.08), transparent 64%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border-radius: 8px;
}
#mahjongView .mj-seat {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
/* 浮标全幅透明层，高于结算遮罩 */
#mahjongView .mj-float-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
/* 碰=绿色 / 胡&自摸=红色 —— 白色气泡 + 尖角指向座位 */
#mahjongView .mj-float {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  min-width: 44px;
  padding: 8px;
  pointer-events: none;
  opacity: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--ui-color);
  background: #fdf5e4;
  border-radius: 8px;
}
#mahjongView .mj-float::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
}
/* 浮标固定坐标 */
#mahjongView .mj-float-layer #mjFloat1 { left: calc(50% - 22px); top: 48px; }
#mahjongView .mj-float-layer #mjFloat2 { left: 30px;             top: calc(50% - 11px); }
#mahjongView .mj-float-layer #mjFloat3 { right: 30px;            top: calc(50% - 11px); }
#mahjongView .mj-float-layer #mjFloat0 { left: calc(50% - 22px); top: calc(100% - 80px); }
/* 胡/自摸用红色 */
#mahjongView .mj-float.mj-float-win {
  color: #e53935;
}
/* 玩家(底)：尖角向下 */
#mahjongView #mjFloat0::after {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #fff;
}
/* 对家(顶)：尖角向上 */
#mahjongView #mjFloat1::after {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #fff;
}
/* 左家：尖角向左 */
#mahjongView #mjFloat2::after {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #fff;
}
/* 右家：尖角向右 */
#mahjongView #mjFloat3::after {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 7px solid #fff;
}
#mahjongView .mj-float.mj-float-show {
  animation: mj-float-pop 0.8s ease-out both;
}
@keyframes mj-float-pop {
  0%   { opacity: 0; transform: scale(1.7); }
  18%  { opacity: 1; transform: scale(1); }
  70%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: translateY(-16px); }
}

/* 顶部对家：横向 8 张平铺 + 横向副露 */
#mahjongView .mj-seat.top {
  top: 4px;
  left: 32px;
  right: 32px;
  flex-direction: row;
  align-items: flex-end;
  gap: 4px;
}
#mahjongView .mj-wall-h {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0;
}
/* 对家暗牌整体下移，给顶部夹层留出可视空间（否则最上层被视口顶部裁切） */
#mahjongView .mj-seat.top .mj-wall-h {
  margin-top: 8px;
}
/* 对家暗牌：纯色绿面 + 顶部夹层 */
#mahjongView .mj-back-card {
  position: relative;
  z-index: 3; /* 卡面盖住夹层顶部，只露出夹层高于卡面的部分 */
  width: 17px;
  height: 20px;
  box-sizing: border-box;
  background: #3f8a63;
  border: 1px solid #2f6a4a;
  border-radius: 3px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
  flex-shrink: 0;
}
/* 精灵球图标 */
#mahjongView .mj-back-card .mj-back-icon {
  position: absolute;
  top: 52%;
  left: 50%;
  width: 13px;
  height: 13px;
  transform: translate(-50%, -50%);
  color: var(--mj-label-color); /* icon-owned 使用 fill="currentColor"，渲染为麻将边框色 */
  pointer-events: none;
}
/* 白/绿夹层叠加：白-6px / 绿-4px，视觉白上绿下 */
#mahjongView .mj-seat.top .mj-wall .mj-stack.mj-back-stack .mj-layer-inner {
  top: -6px;
  z-index: 1;
  border-bottom: none;
  border-radius: 3px 3px 0 0;
}
#mahjongView .mj-seat.top .mj-wall .mj-stack.mj-back-stack .mj-layer-outer {
  top: -4px;
  z-index: 2;
  border-bottom: none;
  border-radius: 3px 3px 0 0;
}

/* 左右两家：竖向堆叠暗牌 + 竖向副露 */
#mahjongView .mj-seat.left {
  top: 16px;
  left: 4px;
  width: 28px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
}
#mahjongView .mj-seat.right {
  top: 16px;
  right: 4px;
  width: 28px;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 4px;
}
#mahjongView .mj-wall-v {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
}
/* 竖向背卡：绿条在朝向桌心的内侧 */
#mahjongView .mj-back-v {
  width: 9px;
  height: 22px;
  background: #fff7e6;
  border: 1px solid #2f6a4a;
  border-radius: 2px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
  position: relative;
  flex-shrink: 0;
}
#mahjongView .mj-seat.left .mj-back-v {
  background: linear-gradient(270deg, #3f8a63 0 3px, #fff7e6 3px 100%);
}
#mahjongView .mj-seat.right .mj-back-v {
  background: linear-gradient(90deg, #3f8a63 0 3px, #fff7e6 3px 100%);
}

/* 底部玩家：手牌贴左，副露同行右对齐 */
#mahjongView .mj-seat.bottom {
  bottom: 0;
  left: 4px;
  right: 4px;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
  padding-left: 8%;
  gap: 8px;
}
#mahjongView .mj-hand {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0;
  flex: 0 0 auto;
}
#mahjongView .mj-hand .mj-card {
  cursor: pointer;
}
/* hover 作用在夹层包裹层上：卡面与夹层一起浮起，避免夹层脱离卡面 */
#mahjongView .mj-hand .mj-stack:hover {
  transform: translateY(-6px);
}
#mahjongView .mj-hand .mj-stack:hover .mj-card {
  outline: 2px solid var(--ui-color);
  outline-offset: -2px;
}
/* 非玩家回合 / 发牌中：禁止手牌 hover 浮起 */
#mahjongView .mj-dealing .mj-stack:hover,
#mahjongView .mj-dealing .mj-stack.mj-hovered {
  transform: none;
}
#mahjongView .mj-dealing .mj-stack:hover .mj-card,
#mahjongView .mj-dealing .mj-stack.mj-hovered .mj-card {
  outline: none;
}

/* 副露容器 */
#mahjongView .mj-meld {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 0;
}
#mahjongView .mj-meld-h {
  flex-direction: row;
  gap: 0; /* 副露牌之间贴紧 */
}
/* 玩家副露夹层下移 6px，与手牌底部对齐 */
#mahjongView .mj-player-meld {
  margin-top: -6px;
  padding-bottom: 6px;
  overflow: visible;
}
#mahjongView .mj-meld-v {
  flex-direction: column;
  gap: 0;
  justify-content: flex-start;
}

/* 中央桌面：明宝牌 → 局况 → 牌河 → 提示 */
#mahjongView .mj-center {
  position: absolute;
  left: 32px;
  right: 32px;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  z-index: 1;
}
#mahjongView .mj-river-box {
  position: relative;
  width: 100%;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 3px;
}
#mahjongView .mj-river {
  width: 100%;
  display: grid;
  /* 长方形 8×6 网格（示例 41111112/40000002/.../43333332）：
     左右(竖区)各 1 列包住上下(横区)；中央在左右家之间为正方形，
     其上下两行放对家/玩家横排，余下 4 行即空矩形中心。
     统一 1fr 使左右高 = 对家宽，aspect-ratio 保证整体长方形 */
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-template-areas:
    "left top top top top top top right"
    "left . . . . . . right"
    "left . . . . . . right"
    "left . . . . . . right"
    "left . . . . . . right"
    "left bottom bottom bottom bottom bottom bottom right";
  gap: 2px;
  aspect-ratio: 8 / 6;
}
#mahjongView .mj-river-lane {
  min-width: 0;
  background: var(--item-bg);
  border-radius: 5px;
  padding: 2px 3px;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  overflow: hidden;
}
#mahjongView .mj-river-lane[data-side="opp"] { grid-area: top; justify-content: flex-end; }
#mahjongView .mj-river-lane[data-side="left"] { grid-area: left; justify-content: flex-start; align-items: center; }
#mahjongView .mj-river-lane[data-side="right"] { grid-area: right; justify-content: flex-end; align-items: center; }
#mahjongView .mj-river-lane[data-side="player"] { grid-area: bottom; }
#mahjongView .mj-river-cards {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 0;
  min-height: 0;
  overflow: visible;
}
/* 弃牌流：四边统一 mini 竖牌 */
#mahjongView .mj-river-lane[data-side="opp"] .mj-river-cards {
  flex-direction: row-reverse;
  max-height: 28px;
}
#mahjongView .mj-river-lane[data-side="left"] .mj-river-cards {
  flex-direction: column;
  align-items: center;
  gap: 0;
  max-height: 100%;
}
#mahjongView .mj-river-lane[data-side="right"] .mj-river-cards {
  flex-direction: column-reverse;
  align-items: center;
  gap: 0;
  max-height: 100%;
}
#mahjongView .mj-river-lane[data-side="player"] .mj-river-cards {
  max-height: 28px;
}
/* 四边牌统一竖放：对家/左家倒置，右家/玩家正立 */
#mahjongView .mj-river-lane[data-side="opp"] .mj-river-cards .mj-card.mj-mini { transform: rotate(180deg); }
#mahjongView .mj-river-lane[data-side="opp"] .mj-river-cards .mj-card.mj-mini ~ .mj-card.mj-mini { margin-right: -5px; }
#mahjongView .mj-river-lane[data-side="left"] .mj-river-cards .mj-card.mj-mini { transform: rotate(90deg); }
#mahjongView .mj-river-lane[data-side="left"] .mj-river-cards .mj-card.mj-mini ~ .mj-card.mj-mini { margin-top: -12px; }
#mahjongView .mj-river-lane[data-side="right"] .mj-river-cards .mj-card.mj-mini { transform: rotate(-90deg); }
#mahjongView .mj-river-lane[data-side="right"] .mj-river-cards .mj-card.mj-mini ~ .mj-card.mj-mini { margin-bottom: -12px; }
#mahjongView .mj-river-lane[data-side="player"] .mj-river-cards .mj-card.mj-mini ~ .mj-card.mj-mini { margin-left: -5px; }
/* 立直宣言牌：四边统一横放 90°，与竖牌区分 */
#mahjongView .mj-river-lane[data-side="opp"] .mj-river-cards .mj-card.mj-mini.mj-riichi { transform: rotate(90deg); }
#mahjongView .mj-river-lane[data-side="player"] .mj-river-cards .mj-card.mj-mini.mj-riichi { transform: rotate(90deg); }
#mahjongView .mj-river-lane[data-side="left"] .mj-river-cards .mj-card.mj-mini.mj-riichi { transform: rotate(180deg); }
#mahjongView .mj-river-lane[data-side="right"] .mj-river-cards .mj-card.mj-mini.mj-riichi { transform: rotate(0deg); }

/* 中央信息（叠在牌河正中） */
#mahjongView .mj-river-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  z-index: 1;
}
#mahjongView .mj-center-main {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  align-self: flex-start; /* 宝牌+局况整体偏左上，避开中央牌河 */
  margin-left: 10px;
}
#mahjongView .mj-c-info {
  display: flex;
  flex-direction: column; /* 局数在上、下注在下 */
  align-items: flex-start;
  gap: 2px;
}
#mahjongView .mj-c-label {
  font-size: 10px;
  font-weight: 800;
  color: var(--mj-label-color);
  white-space: nowrap;
}
#mahjongView .mj-dora {
  display: flex;
  justify-content: center;
  align-items: center;
}
#mahjongView .mj-dora-card {
  min-width: 20px;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 宝牌卡面已并入手牌/副露公共样式（绿边框+圆角+底部夹层） */
#mahjongView .mj-msg {
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--mj-label-color);
  letter-spacing: 0.3px;
  line-height: 1;
  height: 11px;
  flex-shrink: 0;
  margin-top: 3px;
}
#mahjongView .mj-msg .mj-dice {
  font-size: 40px;
  font-weight: 400;
  letter-spacing: 6px;
}
/* 操作区（碰牌指示 + 按钮）：悬浮于牌河底层容器之上，不占网格/流内布局 */
#mahjongView .mj-msg-actions {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 15%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  z-index: 5;
  background: var(--mj-overlay-bg);
  border-radius: 4px;
  padding: 3px 8px;
}
#mahjongView .mj-msg-actions[hidden] {
  display: none;
}
#mahjongView .mj-msg-actions .casino-btn {
  min-width: 44px;
  padding: 2px 10px;
  font-size: 10px;
  border-radius: 6px; /* 正常小圆角，不用胶囊 */
}
/* 可碰牌：在「碰！」按钮左侧展示 */
#mahjongView .mj-msg-actions .mj-pon-card {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 立直环：与牌河网格对齐 */
#mahjongView .mj-river-ring {
  position: absolute;
  inset: 3px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 2px;
  pointer-events: none;
  z-index: 2;
}
#mahjongView .mj-river-ring .mj-riichi-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3px;
}
/* 立直文字定位：四家对称分布于牌河四边 */
#mahjongView .mj-river-ring .mj-riichi-slot.top {
  grid-column: 4 / 6;
  grid-row: 2;
}
#mahjongView .mj-river-ring .mj-riichi-slot.left {
  grid-column: 2;
  grid-row: 3 / 5;
  flex-direction: column;
}
#mahjongView .mj-river-ring .mj-riichi-slot.right {
  grid-column: 7;
  grid-row: 3 / 5;
  flex-direction: column;
}
#mahjongView .mj-river-ring .mj-riichi-slot.bottom {
  grid-column: 4 / 6;
  grid-row: 5;
}
/* 左右立直条文字竖立且左右镜像：左家右转 90° / 右家左转 -90°，朝向桌心 */
#mahjongView .mj-river-ring .mj-riichi-slot.left .mj-riichi-tag { transform: rotate(90deg); }
#mahjongView .mj-river-ring .mj-riichi-slot.right .mj-riichi-tag { transform: rotate(-90deg); }
#mahjongView .mj-riichi-tag {
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  background: var(--ui-color);
  border-radius: 4px;
  padding: 1px 7px;
  line-height: 1.4;
  white-space: nowrap; /* 禁止「立直」两字换行 */
  width: max-content;  /* 不被窄列槽位挤压收缩（左右家 rotate 后尤其需要） */
  flex-shrink: 0;
  flex: none;
}

/* 正牌：属性色卡面 */
#mahjongView .mj-card {
  position: relative;
  width: 24px;
  height: 34px;
  background: var(--tc, #ffffff);
  border-radius: 4px;
  border: 2px solid var(--tc, #c8c8c8);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2px 1px;
  color: #fff;
  flex-shrink: 0;
  transition: transform 0.12s, box-shadow 0.12s;
}
#mahjongView .mj-img {
  width: 15px;
  height: 15px;
  image-rendering: pixelated;
  object-fit: contain;
}
#mahjongView .mj-pts {
  position: absolute;
  top:1px;
  right:1px;
  font-size: 5px;
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, 0.7);
  z-index: 1;
}
/* 牌面夹层：属性色面 + 双层夹层 */
#mahjongView .mj-hand .mj-card,
#mahjongView .mj-meld .mj-card,
#mahjongView .mj-wall .mj-card,
#mahjongView .mj-dora-card .mj-card,
#mahjongView .mj-pon-card .mj-card {
  box-sizing: border-box;
  background: var(--tc); /* 主卡面 = 属性色纯色（示例主卡） */
  border: 1.5px solid #2f6a4a;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
  width: 22px;  /* 手牌缩小：24x34 → 22x28 */
  height: 28px;
}
/* 宝牌：中号卡 + 白细边 */
#mahjongView .mj-dora-card .mj-card.mj-mini {
  border: 1px solid #fff;
  width: 17px;
  height: 24px;
}
/* 宝牌扫光由 JS 定时器触发（避免重渲染打断 CSS 周期动画） */

/* dora 扫光：挂在 .mj-stack 上，高于卡面，避开 z-index 层级 */
#mahjongView .mj-stack:has(.mj-dora-hit)::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 3px;
  z-index: 99;
  pointer-events: none;
  background-image: linear-gradient(115deg,
    transparent 20%,
    rgba(255, 255, 255, 0.45) 40%,
    rgba(255, 255, 255, 0.15) 55%,
    transparent 70%);
  background-size: 260% 100%;
  background-position: 130% 0;
  background-repeat: no-repeat;
}
#mahjongView .mj-stack:has(.mj-dora-hit.mj-dora-flash)::after {
  animation: mj-dora-shine 0.55s ease-out both;
}
@keyframes mj-dora-shine {
  from { background-position: 130% 0; }
  to   { background-position: -120% 0; }
}
#mahjongView .mj-dora-card .mj-card.mj-mini .mj-img {
  width: 10px;
  height: 10px;
  margin-top: 4px;
}
/* 碰指示牌：中号卡（17x24，比 22x28 略小） */
#mahjongView .mj-pon-card .mj-card {
  width: 17px;
  height: 24px;
}
#mahjongView .mj-pon-card .mj-card .mj-img {
  width: 10px;
  height: 10px;
  margin-top: 4px;
}
/* 夹层包裹层：尺寸跟随卡面 */
#mahjongView .mj-stack {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  transition: transform 0.1s ease-out;
}
#mahjongView .mj-stack .mj-card {
  position: relative;
  z-index: 3; /* 卡面盖住白层顶部 */
}
/* 夹层公共：与卡同宽同边框 */
#mahjongView .mj-layer {
  position: absolute;
  left: 0;
  right: 0;
  height: 12px; /* 越过卡面圆角区填满缺口 */
  box-sizing: border-box;
  border: 1px solid #2f6a4a;
  pointer-events: none;
}
#mahjongView .mj-layer-inner { background: #fff7e6; z-index: 2; }
/* 绿层与白层同宽（宽度统一），仅露出高度更矮 */
#mahjongView .mj-layer-outer {
  background: #3f8a63;
  z-index: 1;
}
/* 手牌夹层顶部：白-4px / 绿-6px */
#mahjongView .mj-hand .mj-layer-inner {
  top: -4px;
  border-bottom: none;
  border-radius: 3px 3px 0 0;
}
/* 绿层露出高度：-6px 仅露 2px */
#mahjongView .mj-hand .mj-layer-outer {
  top: -6px;
  border-bottom: none;
  border-radius: 3px 3px 0 0;
}
/* 玩家副露底部夹层：与顶部垂直镜像 */
#mahjongView .mj-player-meld .mj-layer-inner {
  top: auto;
  bottom: -4px;
  border-top: none;
  border-radius: 0 0 3px 3px;
}
#mahjongView .mj-player-meld .mj-layer-outer {
  top: auto;
  bottom: -6px;
  border-top: none;
  border-radius: 0 0 3px 3px;
}
/* 平躺（副露 / 胡牌亮牌）：夹层强制底部 + 圆角与手牌一致（3px） */
#mahjongView .mj-stack:has(.mj-flat) .mj-layer-inner {
  top: auto;
  bottom: -4px;
  border-top: none;
  border-bottom: 1.5px solid #2f6a4a;
  border-radius: 0 0 3px 3px;
}
#mahjongView .mj-stack:has(.mj-flat) .mj-layer-outer {
  top: auto;
  bottom: -6px;
  border-top: none;
  border-bottom: 1.5px solid #2f6a4a;
  border-radius: 0 0 3px 3px;
}
/* 中央宝牌指示牌 / 碰指示牌：明牌 + 底部夹层（与副露同款） */
#mahjongView .mj-dora-card .mj-layer-inner,
#mahjongView .mj-pon-card .mj-layer-inner {
  top: auto;
  bottom: -4px;
  border-top: none;
  border-radius: 0 0 3px 3px;
}
#mahjongView .mj-dora-card .mj-layer-outer,
#mahjongView .mj-pon-card .mj-layer-outer {
  top: auto;
  bottom: -6px;
  border-top: none;
  border-radius: 0 0 3px 3px;
}
#mahjongView .mj-meld .mj-card .mj-img,
#mahjongView .mj-dora-card .mj-card .mj-img,
#mahjongView .mj-pon-card .mj-card .mj-img {
  z-index: 1;
  width: 12px;
  height: 12px;
  margin-top: 5px;
}
#mahjongView .mj-meld .mj-card .mj-pts,
#mahjongView .mj-wall .mj-card .mj-pts { top: 4px; right: 4px; z-index: 1; }
#mahjongView .mj-stack:has(.mj-fresh) {
  animation: mj-fresh-pop 0.35s ease-out;
}
@keyframes mj-fresh-pop {
  0% { transform: translateY(-14px) scale(1.08); }
  60% { transform: translateY(3px); }
  100% { transform: translateY(0); }
}
/* 牌河/副露 mini 卡：统一白色细边框、小圆角 */
#mahjongView .mj-card.mj-mini {
  width: 13px;
  height: 19px;
  border: 1px solid #fff;
  border-radius: 2px;
  background: var(--tc, #ffffff);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
  padding: 1px;
}
#mahjongView .mj-card.mj-mini .mj-img {
  width: 8px;
  height: 8px;
}
#mahjongView .mj-card.mj-mini .mj-pts {
  display: none;
}
/* 三家 AI 副露卡面统一为 17×24（比玩家副露 22×28 小，与宝牌/碰指示牌一致），
   边框比玩家副露细、图标和点数更小；胡牌方亮出手牌与副露同款 */
#mahjongView .mj-seat.top .mj-meld .mj-card,
#mahjongView .mj-seat.top .mj-wall .mj-card,
#mahjongView .mj-seat.left .mj-meld .mj-card,
#mahjongView .mj-seat.left .mj-wall .mj-card,
#mahjongView .mj-seat.right .mj-meld .mj-card,
#mahjongView .mj-seat.right .mj-wall .mj-card {
  width: 17px;
  height: 24px;
  border-width: 1px;
}
#mahjongView .mj-seat.top .mj-meld .mj-card .mj-img,
#mahjongView .mj-seat.top .mj-wall .mj-card .mj-img,
#mahjongView .mj-seat.left .mj-meld .mj-card .mj-img,
#mahjongView .mj-seat.left .mj-wall .mj-card .mj-img,
#mahjongView .mj-seat.right .mj-meld .mj-card .mj-img,
#mahjongView .mj-seat.right .mj-wall .mj-card .mj-img {
  width: 10px;
  height: 10px;
}
#mahjongView .mj-seat.top .mj-meld .mj-card .mj-pts,
#mahjongView .mj-seat.top .mj-wall .mj-card .mj-pts,
#mahjongView .mj-seat.left .mj-meld .mj-card .mj-pts,
#mahjongView .mj-seat.left .mj-wall .mj-card .mj-pts,
#mahjongView .mj-seat.right .mj-meld .mj-card .mj-pts,
#mahjongView .mj-seat.right .mj-wall .mj-card .mj-pts {
  font-size: 5px;
  top: 3px;
  right: 3px;
}
/* 左右家亮牌/副露：卡面旋转 90° 朝向桌心 */
#mahjongView .mj-seat.left .mj-meld .mj-stack,
#mahjongView .mj-seat.left .mj-wall .mj-stack,
#mahjongView .mj-seat.right .mj-meld .mj-stack,
#mahjongView .mj-seat.right .mj-wall .mj-stack {
  width: 24px;
  height: 17px;
  align-items: center;
  justify-content: center;
}
#mahjongView .mj-seat.left .mj-meld .mj-stack .mj-card,
#mahjongView .mj-seat.left .mj-wall .mj-stack .mj-card { transform: rotate(90deg); }
#mahjongView .mj-seat.right .mj-meld .mj-stack .mj-card,
#mahjongView .mj-seat.right .mj-wall .mj-stack .mj-card { transform: rotate(-90deg); }
/* 上面两张为正常卡面，仅最底部一张露出两个夹层（叠在朝桌心的长边下） */
#mahjongView .mj-seat.left .mj-meld .mj-stack:not(:last-child) .mj-layer,
#mahjongView .mj-seat.right .mj-meld .mj-stack:not(:last-child) .mj-layer {
  display: none;
}
/* 对家副露：卡面 180° 朝向玩家 */
#mahjongView .mj-seat.top .mj-meld .mj-stack .mj-card,
#mahjongView .mj-seat.top .mj-wall .mj-stack .mj-card { transform: rotate(180deg); }

/* 结算全屏遮罩：半透明盖住整个视口 */
#mahjongView .mj-result {
  position: absolute;
  inset: 0;
  z-index: 6;
  background: rgba(10, 18, 14, 0.62);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 12px;
  text-align: center;
}
#mahjongView .mj-result[hidden] {
  display: none;
}
/* 结算内容逐条停顿淡入：默认隐藏，JS 逐个加 .mj-res-in */
#mahjongView .mj-result .mj-res-title,
#mahjongView .mj-result .mj-res-cards,
#mahjongView .mj-result .mj-res-yaku-tag,
#mahjongView .mj-result .mj-res-num,
#mahjongView .mj-result .mj-seat-cell,
#mahjongView .mj-result .mj-res-btn {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
#mahjongView .mj-result .mj-res-in {
  opacity: 1;
  transform: translateY(0);
}

#mahjongView .mj-res-title {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  flex: 0 0 auto;
  min-height: 18px;
  line-height: 18px;
}
#mahjongView .mj-res-cards {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin: 4px 0;
}
/* 结算第一屏：番型左右两列，中央番数 */
#mahjongView .mj-result-body {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  flex: 0 0 auto;
  min-height: 100px;
}
#mahjongView .mj-res-col {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
#mahjongView .mj-res-col-l {
  align-items: flex-end;
  text-align: right;
}
#mahjongView .mj-res-col-r {
  align-items: flex-start;
  text-align: left;
}
#mahjongView .mj-res-center {
  flex-shrink: 0;
  padding: 0 2px;
}
/* 番型纯文字展示：无背景无边框 */
#mahjongView .mj-res-yaku-tag {
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  color: #fff;
}
#mahjongView .mj-res-yaku-tag b {
  color: #ffd27f;
}
/* 中央番数大字：数字放大，「番」label 与数字同行内联（役满时以「役满」替代数字并收小字号） */
#mahjongView .mj-res-num {
  position: relative;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  color: #fff;
}
#mahjongView .mj-res-num.mj-res-ym {
  font-size: 26px;
  letter-spacing: 2px;
}
/* 「番」label：内联跟在数字后同一行，基线对齐，字号略小 */
#mahjongView .mj-res-label {
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  margin-left: 5px;
  vertical-align: baseline;
}
/* 结算第二屏：四家绕桌布局（上=对家 中排=左家+右家 下=你），每家水平一行：序号+名字+分值；
   浮现顺序按名次（playResult 按 data-rank 排序）；分值右上角标显示本局增减（红/绿） */
#mahjongView .mj-scores {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 2px 0;
  min-height: 120px;
}
#mahjongView .mj-scores-mid {
  display: flex;
  gap: 4px;
}
#mahjongView .mj-seat-cell {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}
#mahjongView .mj-seat-cell.self {
  background: rgba(255, 210, 127, 0.16);
}
#mahjongView .mj-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  opacity: 0;
  transform: scale(0.5);
}
/* 名次标按名次依次弹出 */
#mahjongView .mj-rank.mj-rank-show {
  animation: mj-rank-pop 0.32s ease-out both;
}
@keyframes mj-rank-pop {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}
#mahjongView .mj-seat-cell.lead .mj-rank {
  background: #f6c700;
  color: #fff; /* 第1名黄色圆形内的数字改白色 */
}
#mahjongView .mj-seat-name {
  min-width: 34px;
}
#mahjongView .mj-seat-score {
  position: relative;
  min-width: 44px;
  text-align: right;
  color: #ffd27f;
  font-size: 14px;
  font-weight: 800;
}
#mahjongView .mj-seat-score .mj-seat-num {
  font-style: normal;
  display: inline-block;
}
#mahjongView .mj-delta {
  position: absolute;
  top: -8px;
  right: 0;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}
#mahjongView .mj-delta.up { color: #4caf50; }
#mahjongView .mj-delta.down { color: #e74c3c; }
/* 结算按钮脱离上方内容流：绝对定位锚在遮罩底部居中，标题/番型/分数多高都不会挤动它；
   用 left/right+auto margin 居中（避免 transform 与淡入动画的 translateY 冲突） */
#mahjongView .mj-result .mj-res-btn {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  margin: 0 auto;
  width: fit-content;
  color: #fff;
}

/* 全场结算：垂直列表 */
#mahjongView .mj-end-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 4px 0;
}
#mahjongView .mj-end-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 4px;
  background: var(--screen-bg-dark);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
#mahjongView .mj-end-cell.self {
  background: var(--screen-bg);
}
/* 全场结算内名次标：比局结算页更小 */
#mahjongView .mj-end-cell .mj-rank {
  width: 13px;
  height: 13px;
  font-size: 8px;
}
/* 全场结算内座位名：比局结算页更小 */
#mahjongView .mj-end-cell .mj-seat-name {
  min-width: 28px;
  font-size: 9px;
}
#mahjongView .mj-end-cell.mj-res-in {
  opacity: 1;
  transform: translateY(0);
}
#mahjongView .mj-end-net {
  font-size: 11px;
  font-weight: 700;
  min-width: 70px;
  text-align: right;
}
#mahjongView .mj-coin-icon {
  width: 10px;
  height: 10px;
  vertical-align: middle;
  image-rendering: pixelated;
}
#mahjongView .mj-end-net.mj-delta-up { color: #ffd354; }
#mahjongView .mj-end-net.mj-delta-down { color: #e74c3c; }
#mahjongView .mj-end-btn {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  margin: 0 auto;
  width: fit-content;
  color: #fff;
}

/* 碰/胡浮标中的宝可梦 icon */
#mahjongView .mj-float-icon {
  width: 22px;
  height: 22px;
  image-rendering: pixelated;
  margin-right: 3px;
  flex-shrink: 0;
}

/* 立直宣言：不能打的牌置灰禁点（灰化整张牌，不响应 hover/点击） */
#mahjongView .mj-hand .mj-stack.mj-no {
  filter: grayscale(0.85) brightness(0.55);
  pointer-events: none;
  cursor: default;
}
#mahjongView .mj-hand .mj-stack.mj-no:hover {
  transform: none;
}
/* 听牌提示：悬停手牌弹出的浮层 —— 一行 mini 卡 + 下方小字剩余张数（浅色小浮层，不显黑块） */
#mahjongView .mj-tenpai-pop {
  position: absolute;
  z-index: 8;
  transform: translate(-50%, calc(-100% - 6px));
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--screen-bg);
  border: 1px solid var(--ui-color);
  border-radius: 5px;
  padding: 3px 5px 2px;
  pointer-events: none;
}
#mahjongView .mj-tenpai-pop[hidden] {
  display: none;
}
#mahjongView .mj-tenpai-pop .mj-tenpai-wait {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
#mahjongView .mj-tenpai-pop .mj-tenpai-cards {
  line-height: 0;
}
#mahjongView .mj-tenpai-pop .mj-tenpai-left {
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}
#mahjongView .mj-tenpai-pop .mj-card {
  box-sizing: border-box;
  background: var(--tc);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: none;
  border-radius: 3px;
  width: 17px;
  height: 24px;
  vertical-align: middle;
}
#mahjongView .mj-tenpai-pop .mj-card.mj-mini .mj-img {
  width: 10px;
  height: 10px;
  margin-top: 4px;
}

/* ===== 抽卡机（Gacha） ===== */
#gachaView { width: 100%; height: 100%; align-self: stretch; }
.gacha-app {
  display: flex; flex-direction: column;
  height: 100%; color: var(--ui-color);
}

/* 顶部卡池信息 */
.gacha-header {
  text-align: center; font-size: 11px;
  padding: 5px 0 5px; flex-shrink: 0;
  opacity: 0.7; letter-spacing: 0.5px;
  position: relative;
}
.gacha-display { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; overflow: hidden; }

/* 十连滑入时允许溢出，让牌从屏幕外滑入 */
.gacha-display-slide {
  overflow: visible;
}

/* 卡池走马灯 */
.gacha-marquee {
  width: 100%; overflow: hidden; padding: 4px 0; flex-shrink: 0;
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.gacha-marquee-track { display: flex; gap: 4px; width: max-content; animation: gacha-marquee-scroll 30s linear infinite; }
.gacha-marquee-item {
  position: relative;
  flex-shrink: 0; width: 54px;
  border: 1px solid transparent; border-radius: 2px;
  overflow: hidden;
}
.gacha-marquee-item img {
  width: 54px; height: auto; display: block; }
.gacha-marquee-item.tier-N  { border-color: #7a8a8a; }
.gacha-marquee-item.tier-R  { border-color: #4477cc; }
.gacha-marquee-item.tier-SR { border-color: #d4850a; }
.gacha-marquee-item.tier-SR::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg,
    transparent 18%,
    rgba(255,255,255,0.5) 38%,
    rgba(255,255,255,0.1) 55%,
    transparent 72%);
  background-size: 260% 100%;
  background-position: 130% 0;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 2;
  animation: marquee-sr-shine 2s ease-in-out infinite;
}
@keyframes marquee-sr-shine {
  from { background-position: 130% 0; }
  to   { background-position: -120% 0; }
}

@keyframes gacha-marquee-scroll {
  to { transform: translateX(-50%); }
}

/* ── 走马灯滚动容器（JS驱动） ── */
.gacha-display-roll {
  justify-content: center; overflow: hidden;
}
.gacha-roll-container {
  width: 100%; overflow: hidden; flex: 1;
  display: flex; align-items: center;
}
.gacha-roll-track {
  display: flex; gap: 4px; width: max-content; will-change: transform;
}

/* ── 滚动单项（含3D翻面） ── */
.gacha-roll-item {
  flex-shrink: 0; width: 54px; margin-right: 2px;
}
.gacha-roll-item img {
  width: 54px; height: auto; display: block;
  image-rendering: auto;
}

/* 3D 翻面容器 */
.gacha-roll-3d {
  position: relative;
  transition: transform 0.5s ease;
  transform-style: preserve-3d;
}
.gacha-roll-3d.flip-back {
  transform: rotateY(180deg);
}
.gacha-roll-face,
.gacha-roll-back {
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.gacha-roll-face img,
.gacha-roll-back img {
  width: 54px; height: auto; display: block;
}
.gacha-roll-back {
  position: absolute; top: 0; left: 0; width: 100%;
  transform: rotateY(180deg);
}

/* ── 垂直叠堆（十连） ── */
.gacha-roll-stack .gacha-roll-back {
  position: absolute; top: 0; left: 0; width: 54px;
  overflow: visible;
}
.gacha-stack-card {
  position: absolute; left: 0;
}
.gacha-stack-card img {
  width: 54px; height: auto; display: block;
}

/* 翻面入场动画：所有牌从正面翻到背面 */
.gacha-roll-3d.roll-flip-in {
  animation: gachaRollFlipIn 0.5s ease-out both;
}
@keyframes gachaRollFlipIn {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(180deg); }
}

/* ── 锁定放大动画 ── */
.gacha-lock-zoom {
  animation: gachaLockZoom 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  transform-origin: center center;
}
@keyframes gachaLockZoom {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* ── 滑入动画（十连下一张从上方滑入） ── */
.gacha-card-slide-in {
  animation: gachaSlideIn 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes gachaSlideIn {
  from {
    transform: translateY(-300%);
    opacity: 0.3;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ── 卡片弹出（走马灯结束后出现）已废弃，保留兼容 ── */
@keyframes gachaCardPop {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.gacha-card-pop { animation: gachaCardPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* ── 3D 翻转卡片 ── */
.gacha-card-wrap { perspective: 600px; width: 100px; }
.gacha-card-inner {
  position: relative; width: 100%;
  transition: transform 0.5s ease; transform-style: preserve-3d;
  cursor: pointer;
}
.gacha-card-inner.flipped { transform: rotateY(180deg); cursor: default; }

.gacha-card-front, .gacha-card-back {
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.gacha-card-front img, .gacha-card-back img { width: 100%; height: auto; display: block; image-rendering: auto; }
.gacha-card-back { position: absolute; top: 0; left: 0; width: 100%; transform: rotateY(180deg); overflow: hidden; }

/* SR 抽卡扫光 */
.gacha-card-back.tier-SR::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg,
    transparent 18%,
    rgba(255, 255, 255, 0.6) 38%,
    rgba(255, 255, 255, 0.15) 55%,
    transparent 72%);
  background-size: 260% 100%;
  background-position: 130% 0;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 2;
}
.gacha-card-inner.flipped .gacha-card-back.tier-SR::after {
  animation: gacha-sr-shine 0.6s ease-out 0.35s both;
}
@keyframes gacha-sr-shine {
  from { background-position: 130% 0; }
  to   { background-position: -120% 0; }
}

/* ── 翻开后左右分栏 ── */
.gacha-display-revealed {
  flex-direction: column; justify-content: center; padding: 0 8px;
}
.gacha-card-area { flex-shrink: 0; }

/* 信息面板 */
.gacha-info {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
}
.gacha-info-line {
  opacity: 0;
  animation: gachaInfoIn 0.25s ease-out both;
}
.gacha-info-name {
  font-size: 14px; font-weight: 600;
  color: var(--ui-color); letter-spacing: 0.5px;
}

/* 品级 / 新卡 徽章 */
.tier-badge, .new-badge {
  position: relative;
  display: inline-block; padding: 2px 8px; border-radius: 3px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.5px;
  color: var(--ui-color);
  background: rgba(var(--ui-color-rgb), 0.12);
  overflow: hidden;
}

/* SR 品级徽章扫光 */
.tier-badge.tier-SR {
  color: #ffcc00;
  background: rgba(212, 133, 10, 0.2);
}
.tier-badge.tier-SR::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg,
    transparent 20%,
    rgba(255, 220, 100, 0.5) 40%,
    rgba(255, 255, 200, 0.15) 55%,
    transparent 75%);
  background-size: 260% 100%;
  background-position: 130% 0;
  background-repeat: no-repeat;
  pointer-events: none;
  animation: tier-sr-shine 2s ease-in-out infinite;
}
@keyframes tier-sr-shine {
  0%   { background-position: 130% 0; }
  100% { background-position: -120% 0; }
}

/* NEW 徽章扫光 */
.new-badge::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg,
    transparent 20%,
    rgba(255,255,255,0.4) 40%,
    rgba(255,255,255,0.1) 55%,
    transparent 75%);
  background-size: 260% 100%;
  background-position: 130% 0;
  background-repeat: no-repeat;
  pointer-events: none;
  animation: new-badge-shine 2s ease-in-out infinite;
}
@keyframes new-badge-shine {
  0%   { background-position: 130% 0; }
  100% { background-position: -120% 0; }
}

/* 重复返还徽章 */
.dup-badge {
  display: inline-block; padding: 1px 6px; border-radius: 3px;
  font-size: 9px; font-weight: 600; letter-spacing: 0.3px;
  color: var(--ui-color);     background: rgba(var(--ui-color-rgb), 0.12);
}

@keyframes gachaInfoIn {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── 十连总览 ── */
.gacha-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, 40px);
  gap: 5px;
  justify-content: center;
  align-content: center;
}
.gacha-summary-card {
  position: relative;
  border: 1px solid transparent; border-radius: 2px;
  width: 40px; flex-shrink: 0;
  overflow: hidden;
}
.gacha-summary-card img {
  width: 40px; height: auto; display: block;
}
.gacha-summary-card.tier-N  { border-color: #7a8a8a; }
.gacha-summary-card.tier-R  { border-color: #4477cc; }
.gacha-summary-card.tier-SR { border-color: #d4850a; }
.gacha-summary-card.err { display: none; }

/* 记录按钮（右上角） */
.gacha-rec-btn {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-family: inherit; font-size: 10px; font-weight: 700;
  padding: 2px 8px;
  border: 1px solid var(--ui-color); border-radius: 3px;
  background: transparent; color: var(--ui-color);
  cursor: pointer; letter-spacing: 0.3px;
  transition: background 0.15s, transform 0.1s;
}
.gacha-rec-btn:hover { background: rgba(var(--ui-color-rgb),0.12); }
.gacha-rec-btn:active { transform: translateY(-50%) scale(0.92); }

/* 总览 SR 扫光 */
.gacha-summary-card.tier-SR::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 2px;
  background: linear-gradient(115deg,
    transparent 18%,
    rgba(255, 255, 255, 0.5) 38%,
    rgba(255, 255, 255, 0.1) 55%,
    transparent 72%);
  background-size: 260% 100%;
  background-position: 130% 0;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 2;
  animation: album-sr-shine 2.5s ease-in-out infinite;
}

/* 底部按钮 — 固定贴底，模仿 mixer-result-actions */
.gacha-actions {
  display: flex; align-items: stretch; width: 100%;
  margin: auto 0 0; flex-shrink: 0; min-height: 25px;
  border: 1px solid var(--item-border); border-bottom: none;
  border-radius: 6px 6px 0 0; overflow: hidden;
}
.gacha-actions button {
  border: none; font-size: 12px; font-weight: 700; cursor: pointer; user-select: none;
  padding: 6px 8px; background: var(--screen-bg-light); color: var(--ui-color);
  display: flex; align-items: center; justify-content: center; font-family: inherit;
}
.gacha-actions button:hover { filter: brightness(1.05); }
.gacha-actions button:disabled { opacity: 0.3; }
/* 双按钮 */
.gacha-actions .gacha-btn { flex: 1; }
.gacha-actions .gacha-btn-sec {
  flex: 1; border-left: 1px solid var(--item-border); filter: brightness(0.95);
}
.gacha-actions .gacha-btn-sec:hover { filter: brightness(0.967); }
/* 单按钮全宽 */
.gacha-actions-single .gacha-btn { flex: 1; border-left: none; }

/* 按钮内游戏币图标 */
.gacha-coin-icon {
  width: 13px; height: 13px; margin-left: 3px;
  vertical-align: middle; display: inline;
  image-rendering: pixelated;
  transform: translateY(1px);
}

/* ===== 卡册（Album） ===== */
#albumView { width: 100%; height: 100%; align-self: stretch; }
.album-app { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 4px 8px; color: var(--ui-color); overflow: hidden; }
.album-stats { display: flex; gap: 8px; justify-content: center; font-size: 9px; opacity: 0.5; margin-bottom: 4px; flex-shrink: 0; }
.album-stats span { white-space: nowrap; }

/* 卡册网格 */
.album-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 38px);
  grid-auto-rows: auto;
  gap: 2px; padding: 4px;
  justify-content: center;
  align-content: center;
}

/* 卡片 */
.album-card {
  position: relative;
  border: 1px solid transparent; border-radius: 2px;
  width: 38px;
  flex-shrink: 0;
  overflow: hidden;
}
.album-card img {
  width: 38px; height: auto;
  display: block;
}
.album-card.owned { border-color: #d4850a; cursor: pointer; }
.album-card.tier-N { border-color: #7a8a8a; }
.album-card.tier-R { border-color: #4477cc; }
.album-card.tier-SR { border-color: #d4850a; }
.album-card.owned.tier-SR { border-color: #ff9900; }
.album-card.locked { opacity: 0.35; }
.album-card.err { display: none; }

/* SR 扫光 */
.album-card.owned.tier-SR::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: linear-gradient(115deg,
    transparent 18%,
    rgba(255, 255, 255, 0.5) 38%,
    rgba(255, 255, 255, 0.1) 55%,
    transparent 72%);
  background-size: 260% 100%;
  background-position: 130% 0;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 2;
  animation: album-sr-shine 2.5s ease-in-out infinite;
}
@keyframes album-sr-shine {
  0%   { background-position: 130% 0; }
  100% { background-position: -120% 0; }
}

/* ── 点击放大遮罩 ── */
.album-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.72); display: flex; align-items: flex-start; justify-content: center;
  z-index: 1000; animation: albumFadeIn 0.2s ease;
}
@keyframes albumFadeIn { from { opacity: 0; } to { opacity: 1; } }
.album-overlay-stage {
  position: relative;
  margin-top: 5%;
}
.album-overlay-card {
  display: block;
  max-width: 80vw; max-height: 80vh; border-radius: 6px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
  transition: transform 0.35s ease-out;
  transform-style: preserve-3d;
}
/* 卡片信息：中文名 + 获得时间，半透明文字，固定在遮罩底部不贴边 */
.album-overlay-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3%;
  text-align: center;
  color: rgba(255, 255, 255, 0.62);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.album-overlay-name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
}
.album-overlay-time {
  margin-top: 2px;
  font-size: 10px;
  opacity: 0.8;
}

.album-dots { display: flex; justify-content: center; gap: 5px; padding: 4px 0 0; }
.album-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(var(--ui-color-rgb), 0.3); cursor: pointer; }
.album-dot.active { background: var(--ui-color); }

/* ===== 随从（糖果抽卡的临时跟随增益）===== */
/* 显示区（与卡包抽卡机一致）：走马灯预览 / 当前随从 / 抽卡结果 */
.follower-display {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
}
/* 锁定放大后容器框淡入：图先放大到位，框再浮现 */
@keyframes follower-card-appear {
  from { background: rgba(var(--ui-color-rgb), 0); }
  to   { background: rgba(var(--ui-color-rgb), 0.08); }
}
.follower-display-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  padding: 0 16px;
}
.follower-card-area {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--ui-color-rgb), 0.08);
  border-radius: 8px;
  flex-shrink: 0;
}
/* 下方行：强度 + 时长同一行居中 */
.follower-dur-boost {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 10px;
  opacity: 0.8;
  margin-top: 6px;
}
.follower-big-img { max-width: 74px; max-height: 74px; image-rendering: pixelated; }
.follower-info { flex: 1; min-width: 0; text-align: left; }
.follower-info-name { font-size: 14px; font-weight: 700; margin-bottom: 3px; }
.follower-info-line { font-size: 10px; opacity: 0.85; margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* 结果页信息逐条淡入（图片已就位，仅文字/按钮淡入） */
.follower-fade {
  opacity: 0;
  animation: follower-fade-in 0.3s ease forwards;
}
@keyframes follower-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 锁定阶段：中央两侧滚动格分别向左/右移出屏幕（边界对齐游戏屏幕，移出即裁） */
.follower-lock-ghosts {
  position: absolute;
  pointer-events: none;
  overflow: hidden;
}
.follower-lock-mid {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 6px;
}
.follower-lock-row {
  display: flex;
  gap: 2px;
}
/* 占位格：目标格位置，宽度对齐锁定宝可梦视觉尺寸（80px），
   左右排从它两侧散开，避免残影格先向中心靠拢再拉开 */
.follower-lock-holder {
  width: 80px; height: 54px;
  flex-shrink: 0;
}
.follower-lock-row.is-left { animation: follower-row-left 0.55s cubic-bezier(0.33, 0, 0.2, 1) 0.1s forwards; }
.follower-lock-row.is-right { animation: follower-row-right 0.55s cubic-bezier(0.33, 0, 0.2, 1) 0.1s forwards; }
.follower-lock-ghost {
  width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
}
.follower-lock-ghost img { max-width: 40px; max-height: 40px; image-rendering: pixelated; }
@keyframes follower-row-left {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--follower-ghost-dist, 140vw))); }
}
@keyframes follower-row-right {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--follower-ghost-dist, 140vw)); }
}

/* 空闲走马灯（复用 gacha-marquee 结构） */
.follower-marquee {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
@keyframes follower-marquee-scroll {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.follower-marquee-track { display: flex; width: max-content; animation: follower-marquee-scroll 30s linear infinite; }
.follower-marquee-item {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.follower-marquee-item img { max-width: 48px; max-height: 48px; image-rendering: pixelated; }
/* 抽卡滚动项：纯图无边框，宽度与步进一致保证吸附精确 */
.follower-roll-item {
  flex-shrink: 0; width: 54px; height: 54px; margin-right: 2px;
  display: flex; align-items: center; justify-content: center;
}
.follower-roll-item img { image-rendering: pixelated; }

/* ── 5 连抽：顶部收集区（依次停放 5 只目标宝可梦） ── */
/* 收集区：结果页正常流展示；滚动阶段用 overlay 绝对定位浮在滚动区上方（不挤压跑马灯） */
.follower-multi-collect {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: 4px 0;
  flex-shrink: 0;
}
.follower-multi-collect.overlay {
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  z-index: 3;
  padding: 0;
  pointer-events: none;
}
/* 结果页：内容从顶部排列，收集区靠顶（位置近似滚动阶段的 overlay top:8px） */
.follower-multi-result-display { justify-content: flex-start; }
.follower-multi-result-display .follower-multi-collect { padding: 12px 0 6px; }
.follower-multi-result-display .follower-display-inner { margin-top: 2px; }
.follower-multi-slot {
  width: 42px;
  height: 42px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  pointer-events: auto;
}
.follower-multi-slot img { max-width: 34px; max-height: 34px; image-rendering: pixelated; opacity: 0.55; }
.follower-multi-slot:hover img { opacity: 0.85; }
.follower-multi-slot.selected img { opacity: 1; }
/* 槽位右下角四角星：超稀有黄色，传说红色 */
.follower-slot-star {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 11px;
  line-height: 1;
  color: #ffd700;
  pointer-events: none;
}
.follower-slot-star.ur { color: #ff5a5a; }

/* 底部按钮栏（复用 gacha-actions 布局） */
.follower-actions {
  display: flex;
  border-top: 1px solid rgba(var(--ui-color-rgb), 0.3);
  min-height: 25px;
  flex-shrink: 0;
}
.follower-actions button {
  flex: 1;
  border: none;
  border-right: 1px solid rgba(var(--ui-color-rgb), 0.3);
  background: transparent;
  color: var(--ui-color);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 8px;
  font-family: inherit;
}
.follower-actions button:last-child { border-right: none; }
.follower-actions button:hover { background: rgba(var(--ui-color-rgb), 0.12); filter: brightness(1.05); }
.follower-actions button:active { background: rgba(var(--ui-color-rgb), 0.2); }
.follower-actions button:disabled { opacity: 0.3; }
.follower-actions .gacha-coin-icon { width: 13px; height: 13px; margin-left: 3px; transform: translateY(1px); }

/* 跟随/放走双按钮：深色主按钮（让他跟随）与浅色次按钮（放走）区分（参考树果合成双按钮 dock） */
.follower-actions .follower-follow-btn {
  background: var(--ui-color);
  color: var(--screen-bg-light);
}
.follower-actions .follower-follow-btn:hover { background: var(--ui-color); filter: brightness(1.1); }
.follower-actions .follower-follow-btn:active { background: var(--ui-color); filter: brightness(0.9); }
.follower-actions .follower-release-btn {
  background: var(--screen-bg-light);
  color: var(--ui-color);
  opacity: 0.85;
}
.follower-actions .follower-release-btn:hover { background: var(--screen-bg-light); filter: brightness(0.97); }

/* 随从页传说徽章用红色，与红星配色一致，区别于超稀有的黄色 */
.follower-tier-badge.tier-UR {
  color: #ff5a5a;
  background: rgba(231, 76, 60, 0.2);
}
.follower-tier-badge.tier-SR,
.follower-tier-badge.tier-UR { position: relative; overflow: hidden; }
.follower-tier-badge.tier-SR::after,
.follower-tier-badge.tier-UR::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg,
    transparent 20%,
    rgba(255, 220, 100, 0.5) 40%,
    rgba(255, 255, 200, 0.15) 55%,
    transparent 75%);
  background-size: 260% 100%;
  background-position: 130% 0;
  background-repeat: no-repeat;
  pointer-events: none;
  animation: tier-sr-shine 2s ease-in-out infinite;
}

/* 挂机页跟随宝可梦（主角身后行走） */
.follower-road {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  image-rendering: pixelated;
}
.follower-road-img {
  display: block;
  image-rendering: pixelated;
  object-fit: none;
}

/* === 仓库高级筛选 === */
/* 批量放生全选按钮：固定在仓库视图右上角（进度条右侧） */
#rosterSelectAll {
  position: absolute;
  top: 1px;
  right: 8px;
  z-index: 5;
  padding: 2px 10px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ui-color);
  background: rgba(var(--ui-color-rgb), 0.1);
  border: 1px solid rgba(var(--ui-color-rgb), 0.4);
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
}
#rosterSelectAll:hover {
  background: rgba(var(--ui-color-rgb), 0.2);
}

/* 高级筛选生效时的条件预览条（替代 pokedex-search-row） */
#rosterAdvBar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  padding: 0 2px 3px;
  font-size: 9px;
  line-height: 1.5;
  user-select: none;
}
.adv-bar-chip {
  display: inline-block;
  padding: 0 6px;
  color: var(--ui-color);
  background: rgba(var(--ui-color-rgb), 0.1);
  border: 1px solid rgba(var(--ui-color-rgb), 0.35);
  border-radius: 8px;
  white-space: nowrap;
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer; /* 单个条件可点击移除 */
}
.adv-bar-chip:hover {
  background: rgba(var(--ui-color-rgb), 0.12);
  color: var(--ui-color-dark);
}
.adv-bar-clear {
  display: inline-block;
  padding: 1px 6px;
  font-size: 9px;
  line-height: 1.4;
  color: var(--ui-color);
  background: transparent;
  border: 1px solid rgba(var(--ui-color-rgb), 0.5);
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
}
.adv-bar-clear:hover {
  background: rgba(var(--ui-color-rgb), 0.12);
  color: var(--ui-color-dark);
}

/* 高级筛选浮层面板：遮罩限定在 console 区域内 + 居中面板；配色对齐派遣配置面板（berry-picker）：米黄底 + 深绿字 */
.adv-filter-overlay {
  position: absolute;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.65);
}
.adv-filter-panel {
  display: flex;
  flex-direction: column;
  width: min(92%, 420px);
  max-height: 88%;
  background: var(--console-body);
  border: 2px solid var(--screen-bg-dark);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
  animation: albumFadeIn 0.18s ease;
}
.adv-filter-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--ui-color-dark);
  border-bottom: 1px solid rgba(var(--ui-color-rgb), 0.25);
  flex-shrink: 0;
}
.adv-filter-close {
  width: 18px;
  height: 18px;
  padding: 0;
  font-size: 11px;
  line-height: 1;
  color: var(--ui-color);
  background: transparent;
  border: none;
  cursor: pointer;
}
.adv-filter-close:hover {
  color: var(--ui-color-dark);
}
.adv-filter-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 12px 12px;
}
.adv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
  margin-top: 8px;
  align-items: start;
}
.adv-grid .adv-span2 {
  grid-column: 1 / -1;
}
.adv-range-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
  margin-top: 8px;
}
.adv-grid .adv-chips,
.adv-range-grid .adv-chips {
  gap: 3px;
}
.adv-group {
  margin-top: 8px;
}
.adv-group-name {
  display: block;
  font-size: 9px;
  font-weight: 800;
  color: var(--ui-color-dark);
  opacity: 0.85;
  margin-bottom: 3px;
}
.adv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.adv-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  font-size: 10px;
  line-height: 1.3;
  color: var(--ui-color);
  background: var(--screen-bg);
  border: 1px solid var(--ui-color);
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  opacity: 0.8;
  transition: opacity 0.12s;
}
.adv-chip:hover {
  opacity: 1;
}
.adv-chip.sel {
  opacity: 1;
  background: var(--ui-color);
  color: var(--screen-bg);
  font-weight: 700;
}
.adv-type-chip {
  gap: 3px;
}
.adv-range {
  align-items: center;
  gap: 6px;
}
.adv-num-input {
  width: 44px;
  padding: 2px 4px;
  font-size: 11px;
  color: var(--ui-color);
  background: rgba(var(--ui-color-rgb), 0.06);
  border: 1px solid rgba(var(--ui-color-rgb), 0.3);
  border-radius: 3px;
  outline: none;
  font-family: inherit;
}
.adv-num-input:focus {
  border-color: var(--ui-color);
  background: rgba(255,255,255,0.3);
}
.adv-range-sep {
  font-size: 10px;
  color: var(--ui-color);
  opacity: 0.6;
}
.adv-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 4px 20px 4px 8px;
  font-size: 11px;
  color: var(--ui-color);
  background: rgba(var(--ui-color-rgb), 0.06);
  border: 1px solid rgba(var(--ui-color-rgb), 0.3);
  border-radius: 3px;
  outline: none;
  font-family: inherit;
}
.adv-search-input::placeholder,
.adv-num-input::placeholder {
  color: rgba(var(--ui-color-rgb), 0.35);
}
.adv-search-input:focus {
  border-color: var(--ui-color);
  background: rgba(255,255,255,0.3);
}
.adv-search-wrap {
  position: relative;
}
.adv-search-clear {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  padding: 0;
  border: none;
  background: transparent;
  color: rgba(var(--ui-color-rgb), 0.45);
  cursor: pointer;
}
.adv-search-clear:hover { color: var(--ui-color); }
.adv-search-clear svg { width: 10px; height: 10px; display: block; }
/* 搜索宝可梦下拉：复用图鉴搜索的 .pokedex-dropdown（米黄底）即与面板契合 */
.adv-filter-foot {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid rgba(var(--ui-color-rgb), 0.25);
  flex-shrink: 0;
}
.adv-filter-btn {
  flex: 1;
  padding: 5px 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--ui-color);
  background: var(--screen-bg);
  border: 1px solid var(--ui-color);
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.12s;
}
.adv-filter-btn:hover {
  opacity: 1;
}
.adv-filter-btn-main {
  opacity: 1;
  background: var(--ui-color);
  color: var(--screen-bg);
}
.adv-filter-btn-main:hover {
  opacity: 0.9;
}