/* ============================================================
   Class 3 (js/class3.js) — ป้าย III บนไอคอนสกิล • การ์ด Class 3 ใน Status • ป้ายบอกทางในหน้าต่างสกิล • สารบัญ Class Book ชั้นที่ 3
   ============================================================ */
.sicon.sk-c3 { position: relative; box-shadow: 0 0 0 1px rgba(255, 214, 106, .55), 0 0 10px rgba(127, 232, 255, .25); }
.sicon.sk-c3::after {
  content: 'III'; position: absolute; right: -3px; bottom: -3px; padding: 0 3px; border-radius: 4px;
  font: 800 8px/12px Cinzel, serif; letter-spacing: .5px; color: #2a1a04;
  background: linear-gradient(180deg, #ffe9a8, #d4a347); box-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.c3-hint { border-left: 2px solid #d4a347; padding-left: 8px; }
.c3-hint b { color: #ffd66a; }
.c3-status {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 8px; padding: 6px 10px;
  border: 1px solid rgba(212, 163, 71, .45); border-radius: 8px;
  background: linear-gradient(90deg, rgba(212, 163, 71, .14), rgba(111, 243, 255, .05));
  font-size: 12px; color: #c8d4e2;
}
.c3-status b { color: #fff3d0; font-family: Cinzel, Kanit, serif; }
.c3-status .c3-tier { font: 800 10px Cinzel, serif; letter-spacing: 2px; color: #2a1a04; background: linear-gradient(180deg, #ffe9a8, #d4a347); border-radius: 4px; padding: 1px 6px; }
.c3-status .c3-oath { color: #9ff0ff; }
.cb-ti.l3 { padding-left: 38px; font-size: 12px; color: #ffe2a0; }
.cb-ti.l3 i { width: 6px; height: 6px; }
.cb-ti.l3::before { content: '└'; color: #8a6a2e; margin-left: -12px; margin-right: -2px; }
@media (max-width: 760px) { .cb-ti.l3 { width: auto; flex: none; padding: 6px 10px; white-space: nowrap; } .cb-ti.l3::before { content: none; } }