/* =========================================================================
   เฟส 2.2: กิลด์ (สไตล์เฟส 4: แผงไม้เข้ม ตราโล่นูน เส้นเข้ม)
   ========================================================================= */
.g-emblem { flex-shrink: 0; filter: drop-shadow(0 3px 0 #1a1412) drop-shadow(0 6px 6px rgba(0, 0, 0, .4)); }
.g-tag { display: inline-block; font-size: 9px; font-weight: 900; letter-spacing: .5px; padding: 0 5px; border-radius: 5px; margin-right: 3px; vertical-align: 1px;
    color: #fff; background: var(--gc); border: 1.5px solid #1a1412; text-shadow: 0 1px 1px rgba(0, 0, 0, .6); }
.g-hero { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 16px; flex-shrink: 0;
    background: radial-gradient(circle at 15% 30%, color-mix(in srgb, var(--gc) 35%, transparent), transparent 60%), linear-gradient(180deg, #3a2a1f, #1c140e); border: 2px solid color-mix(in srgb, var(--gc) 60%, #5c4330); }
.g-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .g-id b { font-size: 17px; } .g-id small { font-size: 11px; color: #c9bdb1; } .g-id span { font-size: 11px; color: #f3e1b6; font-style: italic; }
.g-quest { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 14px; background: linear-gradient(180deg, #33261d, #22180f); border: 1.5px solid #4f3a2a; flex-shrink: 0; }
.g-qhead b { display: block; font-size: 13px; } .g-qhead small { font-size: 10.5px; color: #c9bdb1; } .g-qhead small b { display: inline; color: var(--gold); }
.g-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.g-tier { display: flex; flex-direction: column; gap: 3px; align-items: center; text-align: center; padding: 6px 4px; border-radius: 10px; background: #1c140e; border: 1.5px solid #3d2b1f; opacity: .7; }
.g-tier.ok { opacity: 1; border-color: var(--gold); box-shadow: 0 0 8px rgba(255, 209, 102, .25); } .g-tier.got { border-color: #06d6a0; opacity: .7; }
.g-tier small { font-size: 9.5px; font-weight: 800; } .g-tier .q-bar { width: 100%; } .g-tier span { font-size: 9px; color: #ddd; line-height: 1.25; min-height: 22px; }
.g-tier em { font-style: normal; font-size: 10px; color: #06d6a0; font-weight: 800; } .g-tier .small-btn { width: 100%; padding: 3px; font-size: 10px; }
.g-actions { display: flex; gap: 6px; flex-wrap: wrap; } .g-actions .small-btn { flex: 1; min-width: 90px; }
.g-row .g-emblem { margin-right: 2px; }
.g-create { display: flex; gap: 12px; padding: 12px; border-radius: 16px; background: linear-gradient(180deg, #3a2a1f, #1c140e); border: 2px solid #5c4330; flex-shrink: 0; }
.g-preview { display: flex; align-items: flex-start; justify-content: center; padding-top: 4px; }
.g-form { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .g-form b { font-size: 14px; } .g-form small { font-size: 10px; color: #b5a99c; }
.g-pick { display: flex; flex-wrap: wrap; gap: 4px; }
.g-opt { padding: 2px; border-radius: 10px; border: 2px solid transparent; background: #1c140e; cursor: pointer; } .g-opt.on { border-color: var(--gold); }
.g-sw { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #1a1412; cursor: pointer; box-shadow: 0 2px 0 #1a1412; } .g-sw.on { outline: 3px solid var(--gold); outline-offset: 1px; }
@media (max-width: 360px) { .g-track { grid-template-columns: repeat(2, 1fr); } .g-create { flex-direction: column; } }
.lb-row .small-btn { width: auto; flex-shrink: 0; padding: 5px 12px; }
.lb-row .txt { min-width: 0; }