/* BDO Class Hub skeleton loaders (polish-1, 2026-10-15).
   Gold-tinted shimmer placeholders that fade out once the real content has loaded.
   Driven by js/skeleton.js; with prefers-reduced-motion the shimmer is a still tint and nothing fades. */
:root {
  --skel-base: #17130c;
  --skel-hi: rgba(214, 182, 120, 0.16);
}
@keyframes bch-skel-sweep { 0% { background-position: 150% 0; } 100% { background-position: -50% 0; } }
@keyframes bch-skel-in { from { opacity: 0; } to { opacity: 1; } }

.bch-skel-ov {
  position: absolute; inset: 0; z-index: 40; pointer-events: none; border-radius: inherit;
  background-color: var(--skel-base);
  background-image: linear-gradient(100deg, transparent 30%, var(--skel-hi) 50%, transparent 70%);
  background-size: 200% 100%; background-repeat: no-repeat;
  animation: bch-skel-sweep 1.6s ease-in-out infinite;
  opacity: 1; transition: opacity .45s ease;
}
.bch-skel-ov.is-done { opacity: 0; }
.bch-skel-ov--header { z-index: 60; background-color: #0d0a06; }

img.bch-skel-img {
  background-color: var(--skel-base);
  background-image: linear-gradient(100deg, transparent 30%, var(--skel-hi) 50%, transparent 70%);
  background-size: 200% 100%; background-repeat: no-repeat;
  animation: bch-skel-sweep 1.6s ease-in-out infinite;
}
img.bch-skel-in { animation: bch-skel-in .4s ease both; }

/* tooltip data placeholder */
.stt-skel { display: flex; flex-direction: column; gap: 8px; min-width: 220px; padding: 2px 0; }
.stt-skel-row { display: flex; gap: 10px; align-items: center; }
.stt-skel-box, .stt-skel-line {
  border-radius: 4px; background-color: rgba(178, 141, 85, 0.12);
  background-image: linear-gradient(100deg, transparent 30%, var(--skel-hi) 50%, transparent 70%);
  background-size: 200% 100%; background-repeat: no-repeat;
  animation: bch-skel-sweep 1.6s ease-in-out infinite;
}
.stt-skel-box { width: 40px; height: 40px; flex: 0 0 auto; }
.stt-skel-line { height: 10px; width: 100%; }
.stt-skel-line.w60 { width: 60%; } .stt-skel-line.w80 { width: 80%; } .stt-skel-line.w40 { width: 40%; }
.stt-skel-col { display: flex; flex-direction: column; gap: 7px; flex: 1; }

@media (prefers-reduced-motion: reduce) {
  .bch-skel-ov, img.bch-skel-img, .stt-skel-box, .stt-skel-line { animation: none; background-image: none; }
  .bch-skel-ov { transition: none; }
  img.bch-skel-in { animation: none; }
}