/* BDO Class Hub skill tooltips (js/skill-tooltips.js). Fixed-position, so it never shifts layout. */
.stt-target { cursor: help; }
.stt-target:focus { outline: none; }
.stt-target:focus-visible { outline: 2px solid rgba(178, 141, 85, 0.85); outline-offset: 2px; border-radius: 4px; }
.skill-tt {
  position: fixed; z-index: 10050; left: 0; top: 0;
  width: max-content; max-width: min(380px, calc(100vw - 16px)); min-width: 220px;
  overflow: hidden;
  padding: 0.7rem 0.8rem 0.55rem;
  background: linear-gradient(180deg, rgba(22, 19, 15, 0.98), rgba(10, 9, 8, 0.98));
  border: 1px solid rgba(178, 141, 85, 0.65); border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: #f2efe8; font-size: 0.8rem; line-height: 1.35; text-align: left;
  opacity: 0; transition: opacity 0.1s ease;
  pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.skill-tt[hidden] { display: none; }
.skill-tt.is-visible { opacity: 1; transform: none; }
.skill-tt:not(.is-visible) { transition: none; }
.skill-tt .stt-head { display: flex; gap: 0.6rem; align-items: center; padding-bottom: 0.45rem; border-bottom: 1px solid rgba(178, 141, 85, 0.3); margin-bottom: 0.45rem; }
.skill-tt .stt-icon { width: 40px; height: 40px; flex: none; border: 1px solid rgba(178, 141, 85, 0.5); border-radius: 4px; background: #0a0a0a; }
.skill-tt .stt-name { color: #e9c27a; font-weight: 700; font-size: 0.92rem; }
.skill-tt .stt-sub { color: rgba(242, 239, 232, 0.6); font-size: 0.72rem; margin-top: 0.1rem; }
.skill-tt .stt-grid { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.7rem; margin: 0 0 0.4rem; }
.skill-tt .stt-grid dt { color: rgba(242, 239, 232, 0.6); }
.skill-tt .stt-grid dd { margin: 0; color: #f2efe8; font-weight: 600; }
.skill-tt .stt-sec { margin-top: 0.4rem; }
.skill-tt .stt-h { color: #B28D55; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.15rem; }
.skill-tt .stt-list { list-style: none; margin: 0; padding: 0; }
.skill-tt .stt-list li { padding: 0.05rem 0 0.05rem 0.7rem; position: relative; }
.skill-tt .stt-list li::before { content: ""; position: absolute; left: 0.1rem; top: 0.6em; width: 4px; height: 4px; background: rgba(178, 141, 85, 0.8); transform: rotate(45deg); }
.skill-tt .stt-dmg { display: flex; flex-wrap: wrap; gap: 0 0.5rem; }
.skill-tt .stt-dl { color: rgba(242, 239, 232, 0.7); }
.skill-tt .stt-dv { color: #f5d27f; font-weight: 700; }
.skill-tt .stt-pv { color: #8fc3ff; }
.skill-tt .stt-pvpnote { color: #8fc3ff; font-size: 0.72rem; margin-top: 0.15rem; }
.skill-tt .stt-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.skill-tt .stt-chip { padding: 0.05rem 0.4rem; border: 1px solid rgba(220, 80, 60, 0.6); border-radius: 3px; color: #ff9a85; background: rgba(220, 80, 60, 0.1); font-size: 0.74rem; }
.skill-tt .stt-cc li { color: #f0c28a; }
.skill-tt .stt-cmd li { color: #e6f07a; }
.skill-tt .stt-empty { color: rgba(242, 239, 232, 0.6); }
@media (max-width: 480px) { .skill-tt { font-size: 0.76rem; min-width: 0; } }
@media (prefers-reduced-motion: reduce) { .skill-tt { transition: none; } }