/* ==========================================================================================
   screens/skinStudio.css — 换装 (the skin studio; js/screens/skinStudio.js): full-screen overlay with the roster of
   every operator that has official skins (left) and the selected operator's big illustration + one tile per skin
   (right). Clicking a tile applies the skin at once, so there is no 设为当前 step.
   Mirrors loadout.css: sizes are design px ÷ 100 (theme.css root scale); text that must stay readable on phones uses
   max(.xxrem, N px); the roster/detail split collapses to one pane on phones.
   ========================================================================================== */

.sk {
  position: fixed; inset: 0; z-index: 56; /* one above .lo (55): the 干员调配 entry row opens this on top of it */
  display: flex; flex-direction: column;
  padding: var(--sa-t, 0px) var(--sa-r, 0px) var(--sa-b, 0px) var(--sa-l, 0px);
  background: var(--bg-0); color: var(--text-hi);
  animation: sk-in 200ms var(--ease-out) backwards; overscroll-behavior: contain;
}
@keyframes sk-in { from { opacity: 0; } }
.sk__bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 90% at 82% 8%, rgba(255, 198, 0, .06), transparent 60%),
    radial-gradient(60% 70% at 0% 100%, rgba(78, 216, 175, .07), transparent 60%),
    linear-gradient(rgba(78, 216, 175, .035) 1px, transparent 1px) 0 0 / .6rem .6rem,
    linear-gradient(90deg, rgba(78, 216, 175, .035) 1px, transparent 1px) 0 0 / .6rem .6rem,
    linear-gradient(180deg, #0f1312, #090b0a);
}
.sk > :where(:not(.sk__bg)) { position: relative; }
/* the screen behind the overlay does not need to animate (the .sp-loadout-open rule of loadout.css, same trick) */
.sp-skin-open .app-root > .screen { visibility: hidden; }
.sk-loading { flex: 1; display: flex; align-items: center; justify-content: center; gap: .14rem; color: var(--text-lo); font-size: max(.18rem, 12px); }

/* ---- top bar ---------------------------------------------------------------------------------------------------- */
.sk-top {
  flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .2rem;
  height: max(1rem, 48px); padding: 0 .36rem;
  background: linear-gradient(180deg, rgba(8, 10, 9, .95), rgba(10, 13, 12, .6));
  border-bottom: 1px solid var(--line);
}
.sk-top::after {
  content: ''; position: absolute; left: .36rem; right: .36rem; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, var(--mint-700), transparent 26%, transparent 74%, var(--mint-700));
}
.sk-top__left { justify-self: start; display: flex; align-items: center; gap: .14rem; }
.sk-top__center { display: flex; flex-direction: column; align-items: center; gap: .02rem; }
.sk-top__title { display: flex; align-items: center; gap: .12rem; margin: 0; font-size: max(.32rem, 16px); font-weight: 900; letter-spacing: .14em; line-height: 1.15; }
.sk-top__icon { width: max(.3rem, 16px); height: max(.3rem, 16px); object-fit: contain; color: var(--mint-500); }
.sk-top__right { justify-self: end; display: flex; align-items: center; gap: .16rem; min-width: 0; }
.sk-search { flex: 1 1 2rem; min-width: 1.4rem; max-width: 3rem; }
.sk-count { font-size: max(.16rem, 11px); color: var(--text-lo); white-space: nowrap; }
.sk-count b { color: var(--gold, #ffc600); font-size: max(.22rem, 13px); margin: 0 .02rem 0 .06rem; }
.sk-toggle {
  display: inline-flex; align-items: center; gap: .07rem; height: max(.4rem, 24px); padding: 0 .12rem;
  font: inherit; font-size: max(.15rem, 11px); color: var(--text-lo); background: transparent; border: 1px solid transparent; cursor: pointer;
  touch-action: manipulation; white-space: nowrap;
}
.sk-toggle__box { display: grid; place-items: center; width: max(.2rem, 14px); height: max(.2rem, 14px); border: 1px solid var(--line-3); }
.sk-toggle__box .icon { width: 86%; height: 86%; opacity: 0; color: var(--text-on-mint); }
.sk-toggle.is-on { color: var(--mint-400); }
.sk-toggle.is-on .sk-toggle__box { background: var(--mint-500); border-color: var(--mint-400); }
.sk-toggle.is-on .sk-toggle__box .icon { opacity: 1; }
.sk .sk-back { height: max(.5rem, 32px); padding: 0 max(.2rem, 10px) 0 max(.12rem, 6px); font-size: max(.18rem, 12px); }
.sk-top__right .btn { height: max(.36rem, 28px); padding: 0 max(.16rem, 8px); font-size: max(.15rem, 11px); }
.sk-search .field__box { height: max(.56rem, 28px); padding: 0 max(.16rem, 6px); }
.sk-search .field__input { font-size: max(.2rem, 12px); }
.sk-search .field__icon { width: max(.22rem, 14px); height: max(.22rem, 14px); }

/* ---- body layout -------------------------------------------------------------------------------------------------- */
.sk-body {
  flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 7.4rem);
  gap: .22rem; padding: .18rem .3rem .22rem;
}
.sk-roster { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.sk-panel { min-width: 0; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; display: flex; flex-direction: column; gap: .1rem; padding-right: .04rem; }
.sk-panel-back { display: none; }

/* ---- 角色分类 chips (user 2026-10-09: 419 名干员找起来好麻烦) — the loadout's .lo-chip, same shape ------------------- */
.sk-filters { flex: none; display: flex; flex-direction: column; gap: .06rem; padding: .06rem .02rem .02rem; }
.sk-chips { display: flex; align-items: center; gap: .05rem; flex-wrap: wrap; }
.sk-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: .05rem;
  min-width: max(.46rem, 26px); height: max(.36rem, 22px); padding: 0 .1rem;
  font: inherit; font-size: max(.14rem, 10px); font-weight: 700; color: var(--text-lo);
  background: rgba(255, 255, 255, .03); border: 1px solid var(--line); cursor: pointer;
  clip-path: polygon(.07rem 0, 100% 0, calc(100% - .07rem) 100%, 0 100%);
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
  touch-action: manipulation;
}
.sk-chip:hover { color: var(--text-hi); border-color: var(--line-3); }
.sk-chip.is-on { color: var(--text-on-mint); background: var(--mint-500); border-color: var(--mint-400); }
.sk-chip:focus-visible { outline: 2px solid var(--mint-400); outline-offset: 1px; }
.sk-chip__lbl { font-size: max(.14rem, 10px); }
.sk-chip__icon { width: max(.2rem, 13px); height: max(.2rem, 13px); object-fit: contain; }
.sk-chip--tier .num { font-family: var(--font-num); font-size: max(.16rem, 11px); letter-spacing: .04em; }
.sk-chip--t1 { --tc: var(--tier-1); } .sk-chip--t2 { --tc: var(--tier-2); } .sk-chip--t3 { --tc: var(--tier-3); }
.sk-chip--t4 { --tc: var(--tier-4); } .sk-chip--t5 { --tc: var(--tier-5); } .sk-chip--t6 { --tc: var(--tier-6); }
.sk-chip--tier { color: var(--tc); box-shadow: inset 0 -2px 0 var(--tc); }
.sk-chip--tier.is-on { color: #0b0d0c; background: var(--tc); border-color: var(--tc); }
/* prof.large art is a black glyph on a white square: inverted + screen-blended it becomes a white glyph on any dark
   surface; on the mint "on" chip it is multiplied instead (same trick as loadout.css .lo-profglyph) */
.sk-profglyph { filter: invert(1); mix-blend-mode: screen; opacity: .85; }
.sk-chip:hover .sk-profglyph { opacity: 1; }
.sk-chip.is-on .sk-profglyph { filter: none; mix-blend-mode: multiply; opacity: 1; }

/* ---- roster grid (one card per operator WITH skins) ------------------------------------------------------------------ */
.sk-grid {
  flex: 1 1 auto; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(max(1.16rem, 64px), 1fr)); grid-auto-rows: max-content;
  align-content: start; gap: .1rem; padding: .06rem .08rem .2rem .02rem;
  scrollbar-width: thin; scrollbar-color: var(--line-3) transparent;
}
.sk-empty { grid-column: 1 / -1; padding: .4rem; text-align: center; font-size: max(.16rem, 11px); }
.sk-card {
  position: relative; display: flex; flex-direction: column; align-items: stretch; min-width: 0;
  padding: 0; font: inherit; color: var(--text-hi); text-align: left; cursor: pointer;
  background: linear-gradient(180deg, rgba(34, 41, 38, .95), rgba(14, 17, 16, .98));
  border: 1px solid var(--line); box-shadow: inset 0 -2px 0 rgba(255, 198, 0, .35);
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  touch-action: manipulation;
}
.sk-card:hover { border-color: var(--line-3); transform: translateY(-1px); }
.sk-card.is-sel { border-color: var(--mint-400); box-shadow: inset 0 -2px 0 rgba(255, 198, 0, .35), 0 0 0 1px var(--mint-500), 0 0 .16rem rgba(23, 249, 183, .35); }
.sk-card.is-owned { border-color: var(--gold, #ffc600); }
.sk-card:focus-visible { outline: 2px solid var(--mint-400); outline-offset: 1px; }
.sk-card__art { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #1b201e; }
.sk-card__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sk-card__art::after { content: ''; position: absolute; inset: 55% 0 0; background: linear-gradient(180deg, transparent, rgba(8, 10, 9, .85)); }
.sk-card__glyph { display: grid; place-items: center; width: 100%; height: 100%; font-size: .44rem; font-weight: 900; color: var(--text-dim); }
.sk-card__name {
  position: absolute; left: .05rem; right: .05rem; bottom: .04rem; z-index: 1;
  font-size: max(.15rem, 10px); font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 2px #000;
}
.sk-card__n {
  position: absolute; right: .04rem; top: .04rem; z-index: 1; padding: 0 .05rem; border-radius: .08rem;
  font-family: var(--font-num); font-size: max(.13rem, 9px); font-weight: 800; color: var(--gold, #ffc600);
  background: rgba(8, 10, 9, .72); border: 1px solid rgba(255, 198, 0, .35);
}

/* ---- the operator panel: 小立绘 + one-tap skin tiles ----------------------------------------------------------------
   The 立绘 stays but only as a card-sized thumb in the head row (the user's 2026-10-09 note was about its SIZE, not
   its existence), so the skin tiles keep sitting right under the name and one click is all it takes. */
.sk-panel__head { display: flex; align-items: center; gap: .1rem; }
.sk-panel__titles { display: flex; flex-direction: column; gap: .02rem; min-width: 0; }
.sk-mini { position: relative; flex: none; width: max(.62rem, 44px); height: max(.86rem, 60px); overflow: hidden; background: #1b201e; border: 1px solid var(--line); }
.sk-mini__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }
.sk-mini__glyph { display: grid; place-items: center; width: 100%; height: 100%; font-size: .3rem; font-weight: 900; color: var(--text-dim); }
.sk-panel__name { margin: 0; font-size: max(.26rem, 15px); font-weight: 900; letter-spacing: .06em; }
.sk-panel__sub { font-size: max(.14rem, 10px); }
.sk-skins {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(1.16rem, 1fr)); gap: .08rem; flex: none;
}
.sk-thumb {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .03rem; padding: .06rem .04rem;
  font: inherit; color: var(--text-md); cursor: pointer;
  background: rgba(255, 255, 255, .025); border: 1px solid var(--line);
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
  touch-action: manipulation;
}
.sk-thumb:hover { border-color: var(--line-3); transform: translateY(-1px); }
.sk-thumb.is-on { border-color: var(--gold, #ffc600); background: rgba(255, 198, 0, .1); box-shadow: inset 0 0 0 1px rgba(255, 198, 0, .3); }
.sk-thumb:focus-visible { outline: 2px solid var(--mint-400); outline-offset: 1px; }
.sk-thumb__img { width: 1rem; height: 1rem; object-fit: cover; }
.sk-thumb__name { font-size: max(.12rem, 10px); line-height: 1.25; text-align: center; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .08rem; margin-top: .04rem; }
.sk-hint { margin-left: auto; font-size: max(.12rem, 9px); }

/* ---- the entry button (lobby / room bars) ---------------------------------------------------------------------------- */
.sk-entry { position: relative; gap: .08rem; }
.sk-entry__n {
  display: inline-grid; place-items: center; min-width: 1.5em; height: 1.5em; padding: 0 .3em; margin-left: .02rem;
  font-size: .8em; font-weight: 700; color: var(--text-on-mint); background: var(--gold, #ffc600); border-radius: 1em;
}

/* ---- narrow / short viewports (the loadout rules, same thresholds) ------------------------------------------------------ */
@media (max-width: 1100px) {
  .sk-body { grid-template-columns: minmax(0, 1fr) minmax(0, 6.4rem); gap: .16rem; padding: .12rem .2rem .16rem; }
}
@media (max-width: 760px) {
  .sk-top { padding: 0 .16rem; }
  .sk-count { display: none; }
  .sk-body { grid-template-columns: minmax(0, 1fr); }
  .sk-panel { display: none; }
  .sk-body.is-detail .sk-roster { display: none; }
  .sk-body.is-detail .sk-panel { display: flex; }
  .sk-panel-back {
    display: inline-flex; align-self: flex-start; align-items: center; gap: .04rem; margin-bottom: .08rem; padding: .04rem .12rem .04rem .04rem;
    font: inherit; font-size: max(.15rem, 11px); color: var(--mint-400); background: transparent; border: 1px solid var(--mint-800); cursor: pointer;
  }
  .sk-panel-back .icon { width: .2rem; height: .2rem; }
}
@media (max-height: 520px) {
  .sk-grid { grid-template-columns: repeat(auto-fill, minmax(max(1rem, 58px), 1fr)); }
}
.sk-coarse .sk-thumb, .sk-coarse .sk-toggle { min-height: 30px; }
@media (prefers-reduced-motion: reduce) { .sk, .sk-card, .sk-thumb { animation: none; transition: none; } }