/* =========================================================================
   ตัวละครเจ้าของร้าน + ห้องแต่งตัว (สไตล์เฟส 4: เส้นดำหนา แผงไม้เข้ม ขอบทอง)
   ========================================================================= */
.owner-sprite { display: none !important; }
.shop-avatar { position: absolute; left: 6%; bottom: 2.5%; height: 19%; max-height: 170px; aspect-ratio: 100 / 145; z-index: 6; cursor: pointer; }
.shop-avatar .av-inner { width: 100%; height: 100%; animation: av-idle 1.6s ease-in-out infinite alternate; transform-origin: 50% 100%; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .45)); }
.shop-avatar.visit { cursor: default; z-index: 5; }
.av-edit { position: absolute; top: 2%; right: -6%; font-size: 13px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%;
    background: #ffd166; border: 2px solid #1a1412; box-shadow: 0 2px 0 #1a1412; }
@keyframes av-idle { from { transform: scaleY(1); } to { transform: scaleY(.975) scaleX(1.012); } }
.av-svg .av-armL, .av-svg .av-armR { transform-box: view-box; }
.av-svg .av-armL { transform-origin: 22px 72px; } .av-svg .av-armR { transform-origin: 78px 72px; }
.shop-avatar.act-wave .av-armR { animation: av-wave 1.2s ease-in-out; }
@keyframes av-wave { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-150deg); } 40% { transform: rotate(-120deg); } 60% { transform: rotate(-155deg); } 80% { transform: rotate(-125deg); } }
.shop-avatar.act-jump { animation: av-jump .85s cubic-bezier(.3, .7, .4, 1); }
.shop-avatar.act-jump .av-armL { animation: av-cheerL .85s; } .shop-avatar.act-jump .av-armR { animation: av-cheerR .85s; }
@keyframes av-jump { 0%, 100% { transform: translateY(0); } 15% { transform: translateY(4%) scaleY(.92); } 45% { transform: translateY(-22%); } 70% { transform: translateY(0) scaleY(.95); } }
@keyframes av-cheerL { 0%, 100% { transform: rotate(0); } 30%, 70% { transform: rotate(150deg); } }
@keyframes av-cheerR { 0%, 100% { transform: rotate(0); } 30%, 70% { transform: rotate(-150deg); } }

/* การ์ดโปรไฟล์ใช้หน้าตัวละคร */
.pf-ava.av-face { background: radial-gradient(circle at 50% 40%, #4a3628, #241a13); border-radius: 50%; overflow: hidden; }

/* ---------- ห้องแต่งตัว ---------- */
.av-card { max-width: 460px; display: flex; flex-direction: column; gap: 8px; text-align: left; position: relative; max-height: 92vh; }
.av-top { display: flex; gap: 12px; align-items: stretch; padding-right: 28px; }
.av-stage { width: 112px; flex-shrink: 0; aspect-ratio: 100 / 145; border-radius: 16px; padding: 6px 4px 2px;
    background: radial-gradient(circle at 50% 35%, rgba(255, 209, 102, .28), transparent 65%), repeating-linear-gradient(90deg, #5c3a21 0 18px, #4e311c 18px 36px); border: 2px solid #1a1412; box-shadow: inset 0 -10px 16px rgba(0, 0, 0, .35); }
.av-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.av-info > b { font-size: 16px; color: var(--gold); } .av-info > span { font-size: 11px; color: #b5a99c; }
.av-wear { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border-radius: 10px; background: rgba(0, 0, 0, .3); border: 1.5px solid #4f3a2a; }
.av-wear small { font-size: 9.5px; color: #b5a99c; } .av-wear b { font-size: 12px; line-height: 1.25; } .av-wear .tier-badge { align-self: flex-start; }
.av-rand { width: auto; align-self: flex-start; padding: 5px 12px; margin-top: auto; }
.av-tabs { display: flex; gap: 4px; overflow-x: auto; flex-shrink: 0; scrollbar-width: none; padding-bottom: 2px; }
.av-tabs::-webkit-scrollbar { display: none; }
.av-tab { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; min-width: 54px; padding: 5px 6px; border-radius: 12px; border: 1.5px solid #4f3a2a;
    background: linear-gradient(180deg, #33261d, #22180f); color: #ddd; font-family: inherit; font-size: 10px; font-weight: 700; cursor: pointer; }
.av-tab span { font-size: 17px; line-height: 1.2; }
.av-tab.on { background: linear-gradient(180deg, #ffd166, #f4a261); color: #2b1a10; border-color: #1a1412; box-shadow: 0 3px 0 #1a1412; }
.av-body { overflow-y: auto; min-height: 0; flex: 1; }
.av-chips { display: flex; gap: 4px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; } .av-chips small { margin-left: auto; font-size: 10px; color: #b5a99c; }
.av-chip { padding: 4px 10px; border-radius: 20px; border: 1.5px solid #4f3a2a; background: #22180f; color: #ccc; font-family: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.av-chip.on { background: var(--gold); color: #2b1a10; border-color: #1a1412; }
.av-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 6px; padding: 2px; }
.av-grid.shirts { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); }
.av-opt { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 3px; border-radius: 12px; border: 2px solid #3d2b1f; background: #1c140e;
    color: #ddd; font-family: inherit; font-size: 10px; font-weight: 700; cursor: pointer; }
.av-opt .ms { width: 46px; height: 46px; }
.av-opt.t3 { border-color: #7b4fa0; } .av-opt.t4 { border-color: #b8860b; } .av-opt.t5 { border-color: #c9184a; } .av-opt.t6 { border-color: #00b8a0; }
.av-opt.on { border-color: var(--gold); background: radial-gradient(circle at 50% 30%, rgba(255, 209, 102, .28), #1c140e 70%); box-shadow: 0 0 10px rgba(255, 209, 102, .4); }
.av-opt.lock { opacity: .45; cursor: default; } .av-opt.lock span { font-size: 9px; }
.av-mini { width: 54px; height: 58px; }
.av-sw { width: 38px; height: 38px; border-radius: 50%; border: 2.5px solid #1a1412; box-shadow: 0 3px 0 #1a1412; margin: 6px 0 3px; }
.pf-wardrobe { width: 100%; }
@media (orientation: landscape) and (max-height: 559px) and (min-width: 520px) { .shop-avatar { height: 17%; left: 30%; } }