/* ==========================================================================================
   screens/skins.css — 干员皮肤独立页 (js/screens/skins.js)

   外壳复用统计页那套（.st / .st__bg / .st-top / .st-note / .st-body，见 screens/stats.css）；
   这里只补左右分栏：左边干员列表（可搜索），右边大立绘 + 皮肤方格 + 皮肤名称/系列/画师/说明。
   皮肤方格本身沿用 components.css 的 .skins__item（与干员详情面板里那一排同款）。
   ========================================================================================== */

.sp-skins-open .app-root > .screen { visibility: hidden; }

/* ---- 嵌在 干员调配 里当页签（screens/loadout.js 渲染 <${SkinBrowser} />）--------------------------------------------
   注意：**不要**套统计页的 .st 外壳 —— 它的 .st-body > * 有 max-width: max(12.4rem, 760px)，
   会把内容挤在中间、两边留空（服主反馈过）。这里直接用满宽度的三栏。 */
.skinbrowse { display: flex; flex-direction: column; gap: .1rem; flex: 1 1 auto; min-height: 0; padding: .12rem .16rem .18rem; width: 100%; }
.skinbrowse__head { display: flex; align-items: center; gap: .14rem; flex-wrap: wrap; flex: none; }
.skinbrowse__note { color: var(--text-lo); font-size: max(.13rem, 11px); }
.skinpage__load { display: grid; place-items: center; padding: .4rem; }
.skinpage__body { padding: 0; flex: 1 1 auto; min-height: 0; display: flex; }
.skinpage__grid {
  display: grid;
  grid-template-columns: minmax(2.4rem, 3.2rem) minmax(0, 1fr);   /* 左列表窄，右侧三栏吃掉全部宽度 */
  gap: .22rem;
  flex: 1 1 auto; min-height: 0; width: 100%;
}
/* 右侧三栏（网格）：立绘（固定） ｜ 皮肤信息（弹性，吃掉剩余宽度） ｜ 小人模型（固定宽度，不吃满屏） */
.skinpage__detail {
  display: grid; grid-template-columns: auto minmax(0, 1fr) max(3rem, 380px);
  gap: .22rem; align-items: start; width: 100%; min-height: 0;
}
.skinpage__art { grid-column: 1; }
.skinpage__info { grid-column: 2; }
.skinpage__model { grid-column: 3; min-width: 0; display: flex; flex-direction: column; gap: .08rem; }
.skinpage__modelhead { display: flex; align-items: baseline; gap: .1rem; }
.skinpage__modeltitle { color: var(--text-hi); font-size: max(.16rem, 12px); font-weight: 700; }
.skinpage__modelhead small { color: var(--mint-400); font-size: max(.13rem, 11px); }

/* 小人预览（ui/spinePreview.js）：PIXI 画布 + 动作按钮 */
.spinepv { display: flex; flex-direction: column; gap: .08rem; min-width: 0; }
.spinepv__stage {
  position: relative; width: 100%; border: 1px solid var(--line); cursor: grab;
  background: radial-gradient(60% 60% at 50% 42%, rgba(63, 214, 165, .10), transparent 70%), #0b0e0d;
  overflow: hidden; touch-action: none; user-select: none;
}
.spinepv__stage:active { cursor: grabbing; }
.spinepv__stage canvas { display: block; }
/* 缩放控件（右下角浮层）：滚轮缩放之外的按钮方式。
   ★ z-index 必须高于画布 —— 画布是运行时 append 到 .spinepv__stage 里的，DOM 顺序在控件之后，
     不给控件抬层的话它会盖住按钮：滚轮（挂在容器上、靠冒泡）能用，但按钮点不动（服主反馈）。 */
.spinepv__ctl {
  position: absolute; right: .06rem; bottom: .06rem; z-index: 2;
  display: flex; align-items: center; gap: .04rem;
  padding: .03rem .05rem; background: rgba(8, 10, 9, .72); border: 1px solid var(--line-2);
}
.spinepv__cbtn {
  width: max(.26rem, 22px); height: max(.26rem, 22px); padding: 0; cursor: pointer;
  display: grid; place-items: center; color: var(--text-md);
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2); font-size: max(.15rem, 12px); line-height: 1;
}
.spinepv__cbtn:hover { border-color: var(--mint-500); color: var(--text-hi); }
.spinepv__zoom { min-width: max(.42rem, 34px); text-align: center; color: var(--text-lo); font-size: max(.11rem, 10px); }
.spinepv__overlay { position: absolute; inset: 0; display: grid; place-items: center; }
.spinepv__err { color: var(--red-premium); font-size: max(.13rem, 11px); padding: 0 .1rem; text-align: center; }
.spinepv__hint { margin: 0; padding: .2rem; color: var(--text-lo); font-size: max(.13rem, 11px); text-align: center; }
.spinepv--none { display: grid; place-items: center; border: 1px dashed var(--line); }
.spinepv__bar { display: flex; align-items: center; gap: .1rem; }
.spinepv__meta { color: var(--text-lo); font-size: max(.12rem, 10px); }
.spinepv__anims { display: flex; flex-wrap: wrap; gap: .05rem; max-height: 1.5rem; overflow-y: auto; }
.spinepv__anim {
  display: inline-flex; align-items: baseline; gap: .05rem; padding: .04rem .1rem; cursor: pointer;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--line-2); color: var(--text-md);
  font-size: max(.13rem, 11px);
}
.spinepv__anim:hover { border-color: var(--mint-600); }
.spinepv__anim.is-on { border-color: var(--mint-400); background: var(--mint-a10); color: var(--text-hi); }
.spinepv__anim small { color: var(--text-dim); font-size: max(.1rem, 9px); }

/* ---- 左：干员列表 ------------------------------------------------------------------------------------------------- */
.skinpage__list { display: flex; flex-direction: column; gap: .1rem; min-height: 0; }
.skinpage__search { flex: none; }
.skinpage__items { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: .06rem; }
.skin-op {
  display: flex; align-items: center; gap: .12rem; padding: .08rem .1rem; text-align: left;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--line); cursor: pointer;
}
.skin-op:hover { border-color: var(--mint-600); }
.skin-op.is-on { border-color: var(--mint-400); background: var(--mint-a10); }
.skin-op.is-none { opacity: .5; }
.skin-op__ava { flex: none; width: .5rem; height: .5rem; overflow: hidden; background: #0c0f0e; }
.skin-op__ava img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.skin-op__txt { display: flex; flex-direction: column; min-width: 0; }
.skin-op__txt b { color: var(--text-hi); font-size: max(.16rem, 12px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skin-op__txt small { color: var(--text-dim); font-size: max(.12rem, 10px); }

/* ---- 右：立绘 + 皮肤信息 ----------------------------------------------------------------------------------------- */
/* （三栏网格在上面的 .skinpage__detail 里定义；这里不再重复声明 display，否则会把 grid 覆盖回 flex、右侧留空） */
/* 立绘是 180×360 的半身图：画框按同样的 1:2 比例给固定宽度，
   既不放大（会糊）也不裁切；窄屏才让它铺满。 */
.skinpage__art {
  position: relative; flex: none; align-self: start;
  width: max(2.7rem, 300px); aspect-ratio: 1 / 2; max-height: 100%;
  overflow: hidden; border: 1px solid var(--line); background: #0b0e0d;
}
.skinpage__art img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center top; }
/* 皮肤方格：占满中间这列（大缩略图，多列排布），这样中间不会空一大片 */
.skinpage__skins { flex-wrap: wrap; gap: .08rem; }
.skinpage__info .skins .skins__item { width: max(1.1rem, 92px); height: max(1.1rem, 92px); }
.skinpage__who b { font-size: max(.3rem, 20px); }
.skin-tag {
  position: absolute; left: 0; right: 0; bottom: 0; padding: .06rem .1rem;
  background: rgba(8, 10, 9, .82); color: var(--mint-400); font-size: max(.13rem, 11px);
}
.skinpage__info { min-width: 0; display: flex; flex-direction: column; gap: .12rem; overflow-y: auto; }
.skinpage__who { display: flex; align-items: center; gap: .12rem; }
.skinpage__who b { font-size: max(.26rem, 18px); color: var(--text-hi); }
.skinpage__prof { display: inline-flex; align-items: center; gap: .06rem; color: var(--text-lo); font-size: max(.13rem, 11px); }
.skinpage__profico { width: max(.18rem, 14px); height: max(.18rem, 14px); }
.skinpage__skins .skins__item { width: .62rem; height: .62rem; }

.skin-meta {
  display: flex; flex-direction: column; gap: .07rem;
  padding: .14rem .16rem; border: 1px solid var(--line); background: rgba(255, 255, 255, .02);
}
.skin-meta__desc { margin: .08rem 0 0; color: var(--text-md); font-size: max(.15rem, 12px); line-height: 1.8; }
.skin-meta div { display: flex; gap: .14rem; align-items: baseline; }
.skin-meta span { flex: none; width: 1.2rem; color: var(--text-lo); font-size: max(.13rem, 11px); }
.skin-meta b { flex: 1 1 auto; min-width: 0; color: var(--text-hi); font-size: max(.16rem, 12px); overflow-wrap: anywhere; }
.skin-meta b { color: var(--text-hi); font-size: max(.16rem, 12px); }
.skin-meta__desc { margin: .06rem 0 0; color: var(--text-md); font-size: max(.14rem, 11px); line-height: 1.7; }

/* ---- 嵌在 干员调配 里当页签时的容器（screens/loadout.js 渲染 <${SkinBrowser} />）--------------------------------- */
.skinbrowse { display: flex; flex-direction: column; gap: .1rem; flex: 1 1 auto; min-height: 0; padding: .14rem .2rem .2rem; }
.skinbrowse .st-note { margin: 0; }
.skinbrowse .skinpage__body { padding: 0; flex: 1 1 auto; min-height: 0; }
.skinbrowse .skinpage__items { max-height: none; }
/* 干员详情（lo-dhead__info）里的皮肤行：比独立页小一号，免得把标题区撑开 */
.lo-dhead__info .skins { margin-top: .06rem; }
.lo-dhead__info .skins__item { width: max(.34rem, 26px); height: max(.34rem, 26px); }

/* ---- 窄屏：单列 --------------------------------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .skinpage__body { padding: .14rem .16rem .24rem; }
  .skinpage__grid { grid-template-columns: 1fr; gap: .16rem; }
  .skinpage__list { max-height: 2.6rem; }
  .skinpage__detail { grid-template-columns: 1fr; }
  .skinpage__art { width: max(1.4rem, 140px); }
}