/* =========================================================================
   เฟส 5: ต้นไม้ทักษะ / ชุดสะสม — สไตล์เดียวกับภาพเฟส 4
   (แผงไม้เข้ม ขอบทอง เหรียญนูนมีเงา ไอคอนเส้นขอบเข้ม #1a1412)
   ========================================================================= */
/* ---------- ต้นไม้ทักษะ ---------- */
.skills-box {
    display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 16px;
    background: linear-gradient(180deg, #3a2a1f, #24190f); border: 2px solid #5c4330;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 16px rgba(0, 0, 0, .35);
}
.sk-head { display: flex; align-items: center; gap: 8px; }
.sk-head .link-btn { margin: 0 0 0 auto; font-size: 11px; }
.sk-pts { font-size: 11px; font-weight: 800; padding: 2px 10px; border-radius: 20px; background: rgba(0, 0, 0, .35); color: #bbb; }
.sk-pts.has { background: linear-gradient(90deg, #ffd166, #f4a261); color: #2b1a10; animation: popScale .8s infinite alternate; }
.sk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sk-col {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; padding: 8px 4px 6px; border-radius: 14px;
    background: radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--c1) 22%, transparent), transparent 60%), linear-gradient(180deg, #2b1f17, #1c140e);
    border: 1.5px solid color-mix(in srgb, var(--c1) 45%, #3d2b1f);
}
.sk-col b { font-size: 12px; } .sk-col small { font-size: 9px; color: #bba; margin-top: -3px; }
/* เหรียญไอคอนนูน */
.sk-badge {
    width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 38% 30%, color-mix(in srgb, var(--c1) 55%, #fff), var(--c1) 55%, var(--c2));
    border: 2.5px solid #1a1412; box-shadow: 0 4px 0 #1a1412, 0 6px 10px rgba(0, 0, 0, .45), inset 0 2px 0 rgba(255, 255, 255, .4);
}
.sk-badge svg { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }
.sk-pips { display: flex; gap: 3px; margin: 2px 0; }
.sk-pips i { width: 9px; height: 9px; border-radius: 50%; background: #1a1412; border: 1.5px solid #4a3a2c; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6); }
.sk-pips i.on { background: radial-gradient(circle at 35% 30%, #fff, var(--c1) 55%); border-color: #1a1412; box-shadow: 0 0 6px var(--c1); }
.sk-per { display: flex; flex-direction: column; gap: 1px; min-height: 26px; }
.sk-per span { font-size: 8.5px; color: #d8cfc6; line-height: 1.25; }
.sk-btn { width: 100%; padding: 5px 2px; font-size: 10px; }
@media (max-width: 360px) { .sk-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) and (min-height: 560px) { .sk-badge { width: 56px; height: 56px; } .sk-per span { font-size: 10px; } .sk-col b { font-size: 13px; } }

/* ---------- ชุดสะสม ---------- */
.set-sum { font-size: 12px; color: #ddd; background: rgba(255, 255, 255, .05); border-radius: 10px; padding: 7px 10px; }
.set-sum b { color: var(--gold); }
.set-tabs .tab { font-size: 11px; padding: 6px 4px; }
.set-card {
    flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 14px;
    background: linear-gradient(180deg, #33261d, #22180f); border: 1.5px solid #4f3a2a; box-shadow: 0 6px 12px rgba(0, 0, 0, .3);
}
.set-card.done { border-color: #ffd166; background: radial-gradient(circle at 90% 0%, rgba(255, 209, 102, .18), transparent 50%), linear-gradient(180deg, #3d2d1e, #24190f); }
.set-top { display: flex; align-items: center; gap: 8px; }
.set-ico {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 17px;
    background: radial-gradient(circle at 38% 30%, #fff3c4, #e9b949 55%, #9c6b1d); border: 2px solid #1a1412; box-shadow: 0 3px 0 #1a1412;
}
.set-card:not(.done) .set-ico { filter: grayscale(.6) brightness(.85); }
.set-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.set-name b { font-size: 13px; } .set-name small { font-size: 10px; color: #b5a99c; }
.set-count { font-weight: 800; font-size: 13px; color: var(--gold); }
.set-shirts { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 4px; }
.set-shirt { aspect-ratio: 1; border-radius: 8px; background: rgba(0, 0, 0, .25); padding: 2px; }
.set-shirt:not(.got) svg { filter: brightness(0) drop-shadow(0 0 1px rgba(255, 255, 255, .35)); opacity: .55; }
.set-shirt.got { background: radial-gradient(circle, rgba(255, 255, 255, .1), rgba(0, 0, 0, .2)); }

/* ---------- กระสอบพิเศษประจำวัน / ตลาดนัดสุดสัปดาห์ ---------- */
.sack-visual-card.special-tier { background: radial-gradient(circle at 15% 20%, rgba(255, 180, 162, .25), transparent 55%), linear-gradient(135deg, #4a2c2a, #2b1a19); border-color: #ffb4a2; }
.special-left { display: flex; align-items: center; gap: 4px; margin: 2px 0 4px; font-size: 10px; color: #ffd6cc; font-weight: 700; }
.special-left i { width: 12px; height: 12px; border-radius: 50%; background: #2b1a19; border: 1.5px solid #1a1412; }
.special-left i.on { background: radial-gradient(circle at 35% 30%, #fff, #ffb4a2 55%, #e5989b); box-shadow: 0 0 6px #ffb4a2; }
.wh-weekend { align-items: center; gap: 6px; padding: 6px 10px; border-radius: 12px; font-size: 11px; font-weight: 800; color: #2b1a10;
    background: repeating-linear-gradient(135deg, #ffd166 0 12px, #ffbe0b 12px 24px); border: 2px solid #1a1412; box-shadow: 0 3px 0 #1a1412; }

/* ---------- พาสสัปดาห์ ---------- */
.pass-head { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 14px; background: linear-gradient(135deg, #3a0ca3, #7209b7); border: 2px solid #c77dff; }
.pass-head b { display: block; font-size: 13px; } .pass-head small { font-size: 10px; color: #e0d4ff; }
.pass-medal { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 900; color: #2b1a10;
    background: radial-gradient(circle at 38% 30%, #fff3c4, #ffd166 55%, #b5651d); border: 2.5px solid #1a1412; box-shadow: 0 3px 0 #1a1412; }
.pass-how { display: flex; flex-wrap: wrap; gap: 3px; } .pass-how span { font-size: 9px; color: #ccc; background: rgba(255, 255, 255, .06); border-radius: 8px; padding: 1px 6px; }
.pass-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.pass-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 3px; border-radius: 12px; text-align: center;
    background: linear-gradient(180deg, #2b1f17, #1c140e); border: 1.5px solid #3d2b1f; opacity: .6; }
.pass-node.ok { opacity: 1; border-color: #ffd166; box-shadow: 0 0 10px rgba(255, 209, 102, .25); }
.pass-node.got { opacity: .55; border-color: #06d6a0; box-shadow: none; }
.pass-node.big { grid-column: span 2; background: radial-gradient(circle at 50% 30%, rgba(199, 125, 255, .25), transparent 60%), linear-gradient(180deg, #2b1f17, #1c140e); }
.pass-node small { font-size: 9px; color: #999; } .pn-ico { width: 34px; height: 34px; font-size: 22px; display: flex; align-items: center; justify-content: center; }
.pass-node.big .pn-ico { width: 48px; height: 48px; }
.pn-txt { font-size: 9px; color: #ddd; line-height: 1.2; min-height: 22px; }
.pass-node .small-btn { width: 100%; padding: 3px; font-size: 10px; }
.pn-done { font-size: 13px; color: #06d6a0; font-weight: 900; }

/* ---------- อีเวนต์โลก ---------- */
.world-card { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 14px; border-radius: 16px;
    background: radial-gradient(circle at 50% 0%, rgba(76, 201, 240, .25), transparent 60%), linear-gradient(180deg, #14213d, #0b132b); border: 2px solid #4cc9f0; }
.world-card.done { border-color: #06d6a0; }
.world-globe svg { animation: spin 18s linear infinite; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); }
.world-card b { font-size: 14px; } .world-card small { font-size: 11px; color: #cfe; } .world-card small b { color: var(--gold); font-size: 12px; }
.world-bar { position: relative; width: 100%; height: 20px; border-radius: 12px; background: #0b132b; border: 2px solid #1a1412; overflow: hidden; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .6); }
.world-bar i { display: block; height: 100%; background: linear-gradient(90deg, #06d6a0, #4cc9f0); box-shadow: 0 0 10px #4cc9f0; }
.world-bar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; text-shadow: 0 1px 2px #000; }
.world-rw { font-size: 11px; color: #ffd166; }

/* ---------- ลูกค้าประจำ + เนื้อเรื่อง ---------- */
.reg-tag { background: linear-gradient(90deg, #ffd166, #f4a261) !important; color: #2b1a10 !important; font-weight: 900; white-space: nowrap; border: 1.5px solid #1a1412; }
.hrt-row { display: inline-flex; gap: 2px; vertical-align: middle; }
.hrt { width: 11px; height: 10px; display: inline-block; background: #3a2e28; clip-path: path("M5.5 10 L1 5.4 C-.6 3.6 .2 .4 2.8 .2 C4 .1 5 .8 5.5 1.8 C6 .8 7 .1 8.2 .2 C10.8 .4 11.6 3.6 10 5.4 Z"); }
.hrt.on { background: linear-gradient(180deg, #ff8fab, #ef476f); }
.reg-card { flex-shrink: 0; display: flex; gap: 10px; padding: 10px; border-radius: 14px; background: linear-gradient(180deg, #33261d, #22180f); border: 1.5px solid #4f3a2a; box-shadow: 0 6px 12px rgba(0, 0, 0, .3); }
.reg-card.unknown { opacity: .6; }
.reg-face { width: 72px; height: 72px; flex-shrink: 0; border-radius: 50%; overflow: hidden; border: 2.5px solid #1a1412; box-shadow: 0 3px 0 #1a1412, inset 0 0 0 2px rgba(255, 255, 255, .15);
    background: radial-gradient(circle at 50% 35%, #fff3c4, #e9c46a 60%, #b5651d); }
.reg-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.reg-info > b { font-size: 14px; } .reg-info > small { font-size: 10.5px; color: #c9bdb1; line-height: 1.45; }
.reg-likes { color: #ffd166 !important; }
.story-lock { font-size: 10.5px; color: #998; background: rgba(0, 0, 0, .25); border-radius: 8px; padding: 5px 8px; border: 1px dashed #4f3a2a; }
.story-box { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; padding: 8px; border-radius: 12px;
    background: radial-gradient(circle at 100% 0%, rgba(199, 125, 255, .2), transparent 55%), #1c140e; border: 1.5px solid #9d4edd; }
.story-box.done { border-color: #06d6a0; background: #1c140e; }
.story-box b { font-size: 12px; display: flex; justify-content: space-between; } .story-box b span { font-size: 10px; color: #c77dff; }
.story-box small { font-size: 10px; color: #ccc; }
.story-q { font-size: 11.5px; font-style: italic; color: #f3e1b6; line-height: 1.45; padding-left: 8px; border-left: 3px solid #9d4edd; }
.story-box .small-btn { align-self: flex-start; padding: 5px 14px; }