:root{--gold:#d9ae63;--gold2:#f1d39b;--line:rgba(225,188,120,.30);--muted:#c6baa7}.portrait-panel{margin-top:28px;border-top:1px solid var(--line);padding-top:24px}.portrait-head{display:flex;justify-content:space-between;gap:16px;align-items:end;flex-wrap:wrap}.portrait-head p{margin:6px 0 0;color:var(--muted);font-size:14px}.portrait-strip{display:flex;gap:12px;overflow:auto;padding:8px 0 6px;scrollbar-width:thin}.portrait-strip::-webkit-scrollbar{height:10px}.portrait-strip::-webkit-scrollbar-thumb{background:#5f4d2d;border-radius:999px}.portrait-card{flex:0 0 auto;width:104px;background:#0e0d0c;border:1px solid rgba(225,188,120,.18);border-radius:16px;padding:8px;cursor:pointer;transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease}.portrait-card:hover{transform:translateY(-2px);border-color:rgba(225,188,120,.55)}.portrait-card.is-selected{border-color:var(--gold2);box-shadow:0 0 0 2px rgba(241,211,155,.18),0 14px 26px rgba(0,0,0,.25)}.portrait-card img{display:block;width:88px;height:88px;border-radius:14px;object-fit:cover}.portrait-card span{display:block;margin-top:7px;font-size:11px;text-align:center;color:#d8cbb5}.portrait-preview{display:flex;align-items:center;gap:16px;margin:18px 0 8px}.portrait-preview img{width:78px;height:78px;border-radius:18px;border:1px solid rgba(225,188,120,.26);object-fit:cover;background:#0e0d0c}.portrait-feedback{min-height:22px;font-size:14px;margin-top:10px}.portrait-feedback.good{color:#8fc7a7}.portrait-feedback.bad{color:#e5a0a0}.rank-avatar{display:inline-block;width:42px;height:42px;border-radius:12px;background:#0d0c0b;border:1px solid rgba(225,188,120,.2);object-fit:cover;vertical-align:middle}@media(max-width:620px){.portrait-card{width:96px}.portrait-card img{width:80px;height:80px}}
/* ==========================================================
   Portrait Picker Responsive Width Guard V1
   ========================================================== */

.portrait-panel,
.portrait-picker-host {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.portrait-strip {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  overflow-x: auto;
  overflow-y: hidden;

  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;

  scroll-snap-type: x proximity;
}

.portrait-card {
  min-width: 0;
  scroll-snap-align: start;
}

.portrait-head > * {
  min-width: 0;
}

@media (max-width: 620px) {
  .portrait-strip {
    gap: 10px;
  }

  .portrait-card {
    flex-basis: 92px;
    width: 92px;
  }

  .portrait-card img {
    width: 76px;
    height: 76px;
  }
}