/* Static wardrobe / title preview + bottom selector */
.ts-equip{
  --ts-ink:#f8f0e2;--ts-muted:#d5cbb8;--ts-soft:#c9bba3;--ts-line:#e8d4a828;
  --ts-accent:#f0d59a;--ts-glow:#ff476055;
  display:grid;
  grid-template-columns:minmax(250px,.88fr) minmax(0,1.4fr);
  gap:16px;
  margin:6px 0 28px;
  color:var(--ts-ink);
}
.ts-side{
  padding:20px 20px 18px;
  border:1px solid var(--ts-line);
  border-radius:16px;
  background:linear-gradient(145deg,#3a070dcc,#1c0307e8);
  box-shadow:inset 0 1px 0 #ffd9a418;
  display:flex;flex-direction:column;gap:14px;min-width:0;
}
.ts-side .fg-eyebrow{display:block;margin:0}
.ts-side h2{
  margin:0;font:700 clamp(24px,3vw,34px)/1.15 Georgia,serif;
  text-shadow:0 0 22px var(--ts-glow);
}
.ts-side>p{margin:0;color:var(--ts-muted);font:14px/1.7 'Segoe UI',sans-serif}
.ts-bonus-stack{display:grid;gap:9px}
.ts-bonus{
  display:grid;gap:3px;padding:11px 13px;border-radius:12px;
  background:#280509d0;border:1px solid #e8d4a822;
}
.ts-bonus b{font:800 10px/1.3 'Segoe UI',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ts-accent)}
.ts-bonus span{font:700 17px/1.3 Georgia,serif;color:#fff7ea}
.ts-bonus em{font:12px/1.5 'Segoe UI',sans-serif;color:var(--ts-soft);font-style:normal}
.ts-bonus.is-rank{border-color:#f0c56a55;background:linear-gradient(120deg,#5a151cd8,#2a070bd8)}
.ts-howto{margin:0;padding-left:18px;color:var(--ts-muted);font:13px/1.65 'Segoe UI',sans-serif}
.ts-howto li{margin:0 0 5px}
.ts-chip-row{display:flex;flex-wrap:wrap;gap:7px}
.ts-chip{padding:7px 10px;border-radius:999px;background:#3f0e1599;border:1px solid #efd7a828;color:#efe3cc;font:700 10px/1 'Segoe UI',sans-serif;letter-spacing:.05em}

.ts-viewer{
  min-width:0;display:flex;flex-direction:column;gap:10px;
  border:1px solid var(--ts-line);border-radius:16px;overflow:hidden;
  background:linear-gradient(160deg,#2a0509f2,#0d0204f8);
}
.ts-viewer-head{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px 8px;border-bottom:1px solid #e8d4a818;
}
.ts-tabs{display:flex;gap:6px;flex-wrap:wrap}
.ts-tabs button{
  appearance:none;border:1px solid #e8d4a830;background:#3a0b1299;color:#eadfc8;
  border-radius:999px;padding:8px 12px;font:700 11px/1 'Segoe UI',sans-serif;letter-spacing:.05em;cursor:pointer;
}
.ts-tabs button[aria-pressed="true"]{color:#1a0608;background:linear-gradient(180deg,#f4e1b0,#d9b56a);border-color:#f2dcab}
.ts-meta{color:var(--ts-soft);font:700 10px/1 'Segoe UI',sans-serif;letter-spacing:.12em;text-transform:uppercase}

.ts-hero-stage{
  position:relative;height:clamp(340px,48vh,500px);
  display:grid;place-items:center;
  padding:18px 16px 12px;
  background:radial-gradient(ellipse at 50% 88%,#7a1a2838,transparent 58%),radial-gradient(ellipse at 50% 0,#ff3d5518,transparent 50%);
  overflow:hidden;
}
.ts-hero-stage img[data-ts-stage-img]{
  display:block;width:auto;
  height:min(420px,86%);
  max-width:min(420px,92%);
  object-fit:contain;image-rendering:auto;
  filter:drop-shadow(0 14px 28px #00000088);
  opacity:1;
  transform:translateY(0) scale(1);
  transition:opacity .28s ease, transform .28s ease, filter .28s ease;
  will-change:opacity, transform;
}
.ts-hero-stage img[data-ts-stage-img].is-fading{
  opacity:0;
  transform:translateY(6px) scale(.985);
  filter:drop-shadow(0 8px 16px #00000055);
}
.ts-hero-stage img[data-ts-stage-img].is-title{
  width:min(560px,94%);
  height:180px;
  max-height:180px;
  object-fit:contain;
}
.ts-hero-stage img[data-ts-stage-img][hidden]{display:none!important}
.ts-equip[data-ts-mode="title"] .ts-hero-stage,
.ts-equip:has([data-ts-item][data-ts-mode="title"]) .ts-hero-stage{
  height:clamp(280px,40vh,420px);
}
.ts-stage-empty{
  margin:0;padding:20px;color:#e8d9b8;font:14px/1.6 'Segoe UI',sans-serif;text-align:center;
}
.ts-stage-empty[hidden]{display:none!important}

.ts-caption{padding:2px 16px 8px;text-align:center}
.ts-caption h3{margin:0;font:700 20px/1.25 Georgia,serif;color:#faf3e6}
.ts-caption p{margin:5px 0 0;color:var(--ts-muted);font:13px/1.5 'Segoe UI',sans-serif}
.ts-caption strong{display:inline-block;margin-top:6px;color:var(--ts-accent);font:800 12px/1.4 'Segoe UI',sans-serif}

.ts-rail-wrap{
  border-top:1px solid #e8d4a818;padding:10px 10px 12px;
  background:#140305cc;
}
.ts-rail{
  display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;
  padding:2px 2px 6px;-webkit-overflow-scrolling:touch;
  scrollbar-color:#8a3a4499 transparent;
  overscroll-behavior-x:contain;
  scroll-behavior:smooth;
}
.ts-rail::-webkit-scrollbar{height:6px}
.ts-rail::-webkit-scrollbar-thumb{background:#8a3a4499;border-radius:999px}
.ts-thumb{
  flex:0 0 auto;width:78px;scroll-snap-align:center;
  appearance:none;border:1px solid #efd7a828;border-radius:10px;
  background:#2a080ecc;padding:6px;cursor:pointer;color:#efe3cc;
  display:grid;gap:4px;justify-items:center;
}
.ts-thumb img{width:64px;height:64px;object-fit:contain;display:block}
.ts-thumb.is-title img{width:70px;height:36px}
.ts-thumb span{font:700 9px/1.2 'Segoe UI',sans-serif;letter-spacing:.02em;max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ts-thumb[aria-current="true"]{border-color:#f1d48a;box-shadow:0 0 0 1px #f1d48a55,0 0 14px #ff476033;background:#4a1218cc}
.ts-rail-nav{display:flex;justify-content:center;gap:8px;margin-top:8px}
.ts-rail-nav button{
  width:40px;height:36px;border-radius:8px;border:1px solid #efd7a833;
  background:#2a080eaa;color:#f4e8d4;font:700 16px/1 Georgia,serif;cursor:pointer;
}
.ts-rail-nav button:hover{background:#54131caa}

@media(max-width:960px){
  .ts-equip{grid-template-columns:1fr}
  .ts-hero-stage{height:clamp(260px,48vh,400px)}
}
@media(max-width:560px){
  .ts-thumb{width:68px}
  .ts-thumb img{width:54px;height:54px}
  .ts-side{padding:16px}
}