/* 墨契 · 联机层样式
   只负责：主页「联机」入口、齿轮设置、#scr-pvp 的版式，以及黑屏渐变。
   联机子界面（房间/百科/卡牌/商店/牌组）的内容由 pvp-screens / deck-codex-shop 渲染，
   这里只给它们一个居中的 #pvp-panel 容器，不预设内部结构。 */

/* ------------------------------------------------------------ 主页：齿轮设置 */
.gear-btn {
  position: absolute; right: 26px; bottom: 24px; z-index: 6;
  width: 44px; height: 44px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: #cbb488;
  background: rgba(20, 16, 12, 0.82);
  border: 1px solid rgba(201, 162, 74, 0.45);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
  transition: transform 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.gear-btn svg { width: 22px; height: 22px; fill: currentColor; }
.gear-btn:hover { color: #ffe9bd; border-color: rgba(233, 201, 138, 0.85); transform: rotate(35deg); }
.gear-btn:focus-visible { outline: 2px solid rgba(233, 201, 138, 0.7); outline-offset: 3px; }
.gear-btn:active { transform: scale(0.94); }
@media (prefers-reduced-motion: reduce) { .gear-btn { transition: none; } .gear-btn:hover { transform: none; } }

/* 齿轮是 #frame 的直接子节点（不在缩放的画框里），只有联机页亮着时才出现，尺寸按真实像素 */
#pvp-gear { position: fixed; right: 24px; bottom: 22px; z-index: 90; display: none; }
body.pvp-open #pvp-gear { display: inline-flex; }
/* 打开子面板时收起齿轮：它固定在右下角，会压住图鉴网格和卡组列表的操作按钮 */
body.pvp-open.pvp-panel-open #pvp-gear { display: none; }

/* ------------------------------------------------------------ 尺度
   联机层挂在 #frame 下、不在 1280×720 的 #wrap 画框里，所以直接按真实视口排版（手机竖屏像素）。 */
#scr-pvp { position: fixed; inset: 0; }
/* 面板吃满剩余高度，内部自己滚 —— 否则内容超过视口就被推出屏幕外 */
#pvp-panel {
  width: 100%; flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
}
#pvp-curtain { position: fixed; inset: 0; }

/* 联机页亮着时，把 1280×720 的画框整个让开——它就横在屏幕中间一条，会盖住联机页。 */
body.pvp-open #wrap { visibility: hidden; }

/* 齿轮的真实像素尺寸（.gear-btn 的 44px 会被画框缩放压成 14px） */
#pvp-gear { width: 56px; height: 56px; }
#pvp-gear svg { width: 28px; height: 28px; }

/* ------------------------------------------------------------ 联机页 */
/* 注意：.screen 的 display:none 会被 #scr-pvp 的 ID 规则压过（ID 优先级更高），
   所以这里必须显式再写一遍 display:none，只在 .active 时开成 flex——
   否则联机页在书桌状态也会铺满整屏，从 1280×720 画框两侧漏出来。 */
#scr-pvp {
  padding: 0;
  display: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse 720px 460px at 50% 12%, rgba(255, 176, 92, 0.10), transparent 72%),
    linear-gradient(180deg, rgba(12, 8, 5, 0.94), rgba(7, 5, 3, 0.97)),
    var(--scene-bg, none);
  background-size: cover, cover, cover;
  background-position: center, center, center;
}
#scr-pvp.active {
  display: flex; flex-direction: column;   /* 顶栏固定高，菜单/子界面吃剩余高度 */
}
#scr-pvp::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px);
  opacity: 0.35;
}

/* 横屏顶栏压矮：390 高里标题栏只占 60px 左右 */
.pvp-head {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 24px 8px;
  border-bottom: 1px solid rgba(201, 162, 74, 0.16);
}
.pvp-head-title { flex: 1 1 auto; min-width: 0; }
.pvp-head h2 {
  margin: 0; font-size: 22px; letter-spacing: 8px; font-weight: 600; color: #f7edda;
  text-shadow: 0 0 26px rgba(255, 190, 100, 0.22), 0 3px 0 #221610;
}
#pvp-sub { margin: 2px 0 0; font-size: 11px; letter-spacing: 2px; color: #9c8a70; }
#pvp-back { flex: 0 0 auto; }

/* 五个入口：横屏 844×390 高度只有 390，竖排 5×62 一定溢出 —— 改两列网格：
   3 行，每格 128px 高，60% 宽度居中，一屏放得下且字够大。 */
#pvp-menu {
  position: relative; z-index: 2;
  flex: 0 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  grid-auto-rows: minmax(0, 1fr);
  box-sizing: border-box; width: min(720px, calc(100% - 80px));
  margin: 0 auto; padding: 14px 0 16px;
  touch-action: pan-y;
}
#pvp-menu #pvp-room { grid-column: 1 / -1; }   /* 房间是主入口，横贯整行 */
#pvp-menu .btn {
  min-height: 52px; display: flex; align-items: center; justify-content: center;
  padding: 6px 4px; font-size: 19px; letter-spacing: 6px; text-indent: 6px;
}
#pvp-menu .btn-primary {
  border-color: rgba(201, 162, 74, 0.75); color: #ffe9bd;
  background: linear-gradient(180deg, rgba(92, 62, 32, 0.95), rgba(48, 32, 19, 0.97));
  box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.16), 0 8px 22px rgba(0, 0, 0, 0.6);
}
#pvp-menu .btn:focus-visible { outline: 2px solid rgba(233, 201, 138, 0.7); outline-offset: 3px; }

/* 子界面容器：接管方往里渲染，自己管滚动与内边距 */
#pvp-panel {
  position: relative; z-index: 2;
  flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 0 20px 24px; color: var(--parch-2, #e8dcc4);
  touch-action: pan-y;
}
#pvp-panel[hidden] { display: none; }
#scr-pvp.panel-open #pvp-menu { display: none; }

/* ------------------------------------------------------------ 竖屏提示
   APK 已锁 sensorLandscape；这里兜底「用浏览器以竖屏打开」的情况——
   联机页在竖屏也能用（两列网格会塌成一列），但提示一句更好。 */
#pvp-rotate {
  display: none; position: fixed; left: 50%; bottom: 10px; transform: translateX(-50%);
  z-index: 92; padding: 6px 14px; border-radius: 999px;
  font-size: 12px; letter-spacing: 2px; color: #e9c98a;
  background: rgba(10, 7, 4, 0.82); border: 1px solid rgba(201, 162, 74, 0.3);
  pointer-events: none; white-space: nowrap;
}
@media (orientation: portrait) and (max-height: 700px) {
  body.pvp-open #pvp-rotate { display: block; }
}
/* 竖屏：两列太窄，改回单列竖排（横屏才是主场景，这里只是可用的退路） */
@media (orientation: portrait) {
  #pvp-panel { padding-bottom: 76px; }   /* 别让最后一个按钮压住右下角齿轮 */
  #pvp-menu { grid-template-columns: minmax(0, 1fr); width: min(460px, calc(100% - 48px)); padding-bottom: 76px; }
  #pvp-menu #pvp-room { grid-column: auto; }
  #pvp-menu .btn { min-height: 56px; font-size: 20px; letter-spacing: 7px; }
}

/* ------------------------------------------------------------ 黑屏渐变 */
#pvp-curtain {
  position: absolute; inset: 0; z-index: 80;
  background: radial-gradient(ellipse at 50% 50%, #100a06 0%, #000 78%);
  opacity: 0; pointer-events: none;
  transition: opacity 420ms ease;
}
#pvp-curtain[hidden] { display: none; }
#pvp-curtain.on { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { #pvp-curtain { transition: none; } }

/* ------------------------------------------------------------ 大横屏（平板 / 2400×1080 手机）
   落在 980px 宽以上、460px 高以上的中间地带，原规则没有档位，菜单会贴顶且按钮过小。
   这里让菜单吃满剩余高度并垂直居中。 */
@media (min-width: 981px) and (min-height: 461px) {
  #pvp-menu {
    width: min(880px, calc(100% - 120px));
    gap: 18px;
    padding: 24px 0 28px;
    margin: auto;          /* 纵向居中（父级是 column flex） */
  }
  #pvp-menu .btn {
    min-height: 76px;
    font-size: 26px;
    letter-spacing: 10px;
    text-indent: 10px;
  }
  .pvp-head { padding: 22px 40px 18px; }
  .pvp-head h2 { font-size: 30px; letter-spacing: 12px; }
  #pvp-sub { font-size: 14px; }
}

/* ------------------------------------------------------------ 小屏 / 紧凑视口 */
body.compact #pvp-menu { width: min(520px, calc(100% - 64px)); gap: 16px; }
body.compact #pvp-menu .btn { min-height: var(--touch-min, 56px); font-size: 24px; }
body.compact .gear-btn { width: 54px; height: 54px; }
body.compact .gear-btn svg { width: 26px; height: 26px; }
@media (max-width: 980px) {
  .pvp-head { padding: 24px 30px 14px; }
  .pvp-head h2 { font-size: 26px; letter-spacing: 9px; }
  #pvp-panel { padding: 0 20px 20px; }
  #pvp-menu { width: calc(100% - 48px); }
}
/* 极扁视口（横屏手机 390~430 高）：再压一档 */
@media (max-height: 460px) {
  .pvp-head { padding: 8px 20px 6px; }
  .pvp-head h2 { font-size: 19px; letter-spacing: 6px; }
  #pvp-sub { margin: 1px 0 0; font-size: 10px; letter-spacing: 1px; }
  #pvp-menu { gap: 8px; padding: 8px 0 10px; width: min(680px, calc(100% - 96px)); }
  #pvp-menu .btn { min-height: 44px; font-size: 18px; letter-spacing: 5px; }
  #pvp-panel { padding: 0 16px 12px; }
  #pvp-gear { width: 46px; height: 46px; right: 14px; bottom: 12px; }
  #pvp-gear svg { width: 24px; height: 24px; }
}

/* ================================================================
   手机适配重写（2026-10）
   原版问题：顶栏占 165px（412×915 的 18%）、菜单按钮 181px 高、
   子页按钮是 150px 方块、字号 24px 过大、齿轮压住内容。
   现在：顶栏 56px、按钮按触控标准 44–52px、子页统一 pbtn 小尺寸。
   ================================================================ */

/* ---------------------------------------------------------------- 账号（顶栏右侧的小字条，不再单独占一行） */
#pvp-account {
  position: relative; z-index: 3;
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px;
  max-width: 46%;
}
#pvp-account-name {
  font-size: 12px; letter-spacing: 1px; color: #cbb894;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#pvp-account-btn {
  flex: 0 0 auto; min-height: 30px; padding: 4px 12px;
  font-family: var(--serif); font-size: 12px; letter-spacing: 1px;
  color: #ffe9bd; cursor: pointer; border-radius: 2px;
  background: linear-gradient(180deg, rgba(76, 52, 28, 0.9), rgba(42, 28, 16, 0.95));
  border: 1px solid rgba(201, 162, 74, 0.5);
}
#pvp-account-btn:active { transform: scale(0.97); }

/* ---------------------------------------------------------------- 顶栏压矮 */
.pvp-head {
  padding: 8px 16px 7px;
  gap: 10px;
  flex: 0 0 auto;
}
.pvp-head h2 { font-size: 18px; letter-spacing: 5px; }
#pvp-sub { margin: 1px 0 0; font-size: 10px; letter-spacing: 1px; }
#pvp-back { min-height: 34px; padding: 5px 12px; font-size: 13px; letter-spacing: 1px; }

/* ---------------------------------------------------------------- 菜单：紧凑 */
#pvp-menu {
  width: min(720px, calc(100% - 40px));
  gap: 10px;
  padding: 10px 0 12px;
  grid-auto-rows: auto;          /* 别再按剩余高度拉伸成 181px 大方块 */
  flex: 1 1 auto;
  align-content: start;
}
#pvp-menu .btn {
  min-height: 52px;
  font-size: 17px; letter-spacing: 4px; text-indent: 4px;
}

/* ---------------------------------------------------------------- 子页面按钮统一小尺寸
   原来 .plobby-actions 里的 .btn 继承了 .btn 的块级样式，150px 方块排三个就吃掉半屏。 */
#pvp-panel .btn,
#pvp-panel .pbtn {
  min-height: 42px; padding: 8px 14px;
  font-size: 14px; letter-spacing: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 2px;
}
#pvp-panel .pvpscreens h3 { font-size: 18px; letter-spacing: 3px; margin: 0 0 8px; }
#pvp-panel .pempty { font-size: 13px; margin: 12px 0; line-height: 1.7; }
#pvp-panel .plobby-actions,
#pvp-panel .pform-actions { gap: 8px; }
#pvp-panel .plobby-head { gap: 8px; }
#pvp-panel .plobby-row { padding: 10px 12px; gap: 10px; flex-wrap: wrap; }
#pvp-panel .plobby-name { font-size: 15px; letter-spacing: 1px; }
#pvp-panel .plobby-meta { font-size: 11px; }
#pvp-panel .pinput { padding: 9px 10px; font-size: 14px; }
#pvp-panel .pfield > span { font-size: 12px; letter-spacing: 1px; }
#pvp-panel .pvpform { max-width: 100%; }

/* 牌组页的阵营/稀有度筛选胶囊，原来字大字多会换行挤成一坨 */
#pvp-panel .pchip,
#pvp-panel .pfilter,
#pvp-panel .ptag {
  font-size: 12px; padding: 5px 10px; min-height: 30px;
}

/* 齿轮别压住内容：子页面底部留出它的位置 */
#pvp-panel { padding: 0 16px calc(16px + 56px + 8px); }

/* ---------------------------------------------------------------- 竖屏 */
@media (orientation: portrait) {
  .pvp-head { padding: 7px 14px 6px; }
  .pvp-head h2 { font-size: 17px; letter-spacing: 4px; }
  #pvp-sub { display: none; }          /* 竖屏窄，副标没信息量还占一行 */
  #pvp-account { width: calc(100% - 28px); }
  #pvp-menu { width: calc(100% - 28px); grid-template-columns: minmax(0, 1fr); gap: 9px; padding: 9px 0 12px; }
  #pvp-menu .btn { min-height: 48px; font-size: 16px; letter-spacing: 3px; }
  #pvp-rotate { display: none; }       /* 竖屏已经排版好了，不用催人转屏 */
}

/* ---------------------------------------------------------------- 极扁横屏（844×390 这类） */
@media (max-height: 460px) {
  .pvp-head { padding: 5px 16px 4px; }
  .pvp-head h2 { font-size: 16px; letter-spacing: 4px; }
  #pvp-sub { display: none; }
  #pvp-account { width: min(680px, calc(100% - 32px)); padding: 5px 10px; }
  #pvp-account-name { font-size: 12px; }
  #pvp-account-btn { min-height: 28px; font-size: 12px; padding: 4px 10px; }
  #pvp-menu { width: min(680px, calc(100% - 32px)); gap: 8px; padding: 8px 0 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #pvp-menu #pvp-room { grid-column: 1 / -1; }
  #pvp-menu .btn { min-height: 40px; font-size: 15px; letter-spacing: 3px; }
  #pvp-panel { padding: 0 14px calc(10px + 46px + 6px); }
  #pvp-panel .btn, #pvp-panel .pbtn { min-height: 36px; font-size: 13px; padding: 6px 12px; }
}

/* ---------------------------------------------------------------- 账号面板 */
.pacct { max-width: 420px; margin: 6px auto 0; }
.pacct h3 { margin: 0 0 6px; font-size: 18px; letter-spacing: 3px; color: #f3e6cb; font-weight: 600; }
.pacct-hint { margin: 0 0 12px; font-size: 12px; line-height: 1.7; color: #9c8a70; }
.pacct .pfield { margin: 0 0 10px; }
.pacct-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.pacct-err {
  margin: 0 0 8px; padding: 8px 10px; font-size: 13px; color: #ffb3a2;
  background: rgba(88, 26, 18, 0.55); border: 1px solid rgba(179, 74, 52, 0.55); border-radius: 2px;
}
.pacct-me {
  padding: 12px; margin: 0 0 12px; border-radius: 3px;
  background: rgba(20, 14, 9, 0.8); border: 1px solid rgba(201, 162, 74, 0.25);
}
.pacct-me-name { font-size: 17px; letter-spacing: 1px; color: #f1e6ca; }
.pacct-me-sub { margin-top: 4px; font-size: 12px; color: #9c8a70; }
.pbtn {
  font-family: var(--serif); color: #e8dcc4; cursor: pointer; border-radius: 2px;
  background: rgba(28, 20, 13, 0.9); border: 1px solid rgba(201, 162, 74, 0.35);
}
.pbtn-primary {
  color: #ffe9bd; border-color: rgba(201, 162, 74, 0.75);
  background: linear-gradient(180deg, rgba(92, 62, 32, 0.95), rgba(48, 32, 19, 0.97));
}
/* 危险动作（注销账号）：跟「退出登录」并排，靠暗红边区分 */
.pbtn.danger { color: #f0c9bd; border-color: rgba(156, 49, 38, 0.7); }
.pbtn:active { transform: scale(0.98); }
.pbtn:disabled { opacity: 0.6; }


/* 面板顶部返回条：所有联机子页共用 */
.pvp-panelbar { display: flex; align-items: center; flex: 0 0 auto; padding: 2px 0 8px; }
.pvp-panelbar .pbtn { min-height: 32px; padding: 4px 14px; font-size: 14px; }
.pvp-panelbody { flex: 1 1 auto; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; }

/* ------------------------------------------------ 账号面板：战绩 / 称号 / 成就 */
.pacct-me-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ptitle {
  display: inline-block; font-size: 11px; letter-spacing: 1px;
  padding: 2px 9px; border-radius: 999px; border: 1px solid currentColor;
  vertical-align: middle; margin-left: 8px; white-space: nowrap;
}
.ptitle.t-common { color: #b9ab90; }
.ptitle.t-special { color: #6f9ec4; }
.ptitle.t-limited { color: #b07fc4; }
.ptitle.t-elite { color: #d9a441; }

.pacct-stats {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px; margin: 12px 0 4px;
}
.pacct-stat {
  background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(200, 162, 90, 0.22);
  border-radius: 8px; padding: 8px 6px; text-align: center;
}
.pacct-stat b { display: block; font-size: 17px; color: #e8dcc2; font-weight: 500; }
.pacct-stat span { font-size: 11px; color: #a4957a; }

.pacct-titles h4, .pacct-achs h4 {
  font-size: 12px; letter-spacing: 3px; color: #c8a25a;
  margin: 16px 0 8px; font-weight: 500;
}
.ptitle-list { display: flex; flex-wrap: wrap; gap: 8px; }
.ptitle-list .ptitle {
  margin: 0; background: transparent; font: inherit; font-size: 12px;
  cursor: pointer; min-height: 28px; padding: 4px 12px;
}
.ptitle-list .ptitle:hover { background: rgba(200, 162, 90, 0.12); }
.ptitle-list .ptitle.on { background: currentColor; }
.ptitle-list .ptitle.on::first-line { color: #14100b; }
.ptitle-list .ptitle.on { color: inherit; }
.ptitle-list .ptitle.on::after { content: ' ✓'; }

.pach { margin: 0 0 10px; }
.pach-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pach-name { font-size: 13px; color: #e8dcc2; }
.pach-num { font-size: 11px; color: #a4957a; font-variant-numeric: tabular-nums; }
.pach-desc { font-size: 11px; color: #8f8064; margin: 2px 0 5px; }
.pach-bar { height: 4px; background: rgba(255, 255, 255, 0.07); border-radius: 999px; overflow: hidden; }
.pach-bar i { display: block; height: 100%; background: linear-gradient(90deg, #8a7442, #c8a25a); border-radius: 999px; }
.pach.done .pach-name { color: #d9a441; }
.pach.done .pach-bar i { background: #d9a441; }

/* 横屏矮屏：六格战绩压成三格两行，成就区自己滚 */
@media (max-height: 460px) {
  .pacct-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
  .pacct-stat { padding: 4px 4px; }
  .pacct-stat b { font-size: 14px; }
  .pacct-stat span { font-size: 10px; }
  .pacct-titles h4, .pacct-achs h4 { margin: 10px 0 6px; font-size: 11px; }
  .pach { margin-bottom: 7px; }
  .pach-desc { display: none; }
  .ptitle-list .ptitle { min-height: 24px; padding: 2px 10px; font-size: 11px; }
}


/* ---------------------------------------------------------------- 在线更新提示条
   挂在 #scr-pvp 顶部（联机页自己的层级里），不占玩家操作区：
   默认只露一行字 + 两个按钮，下载时才展开进度条。 */
.pvp-update {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 20px 6px;
  padding: 7px 12px;
  border: 1px solid #6d5a35;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(60,48,28,.9), rgba(34,27,16,.92));
  color: #e8dcc2;
  font-size: 13px;
}
.pvp-update[hidden] { display: none; }
.pvp-update .pu-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pvp-update .pu-bar { flex: 0 0 120px; height: 6px; border-radius: 3px; background: #2a2317; overflow: hidden; }
.pvp-update .pu-bar[hidden] { display: none; }
.pvp-update .pu-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #8a7442, #d9a441); transition: width .2s linear; }
.pvp-update .pbtn { flex: 0 0 auto; min-height: 28px; padding: 3px 12px; font-size: 12px; }

@media (max-height: 460px) {
  .pvp-update { margin: 0 16px 4px; padding: 5px 10px; gap: 8px; font-size: 12px; }
  .pvp-update .pbtn { min-height: 24px; padding: 2px 10px; font-size: 11px; }
  .pvp-update .pu-bar { flex-basis: 90px; }
}