/* One loading material, shared by the server shell and every data region. */
.skeleton {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  border-radius: 7px;
  background: linear-gradient(125deg, #38224080, #202440 56%, #18344480);
  box-shadow: inset 0 1px 0 #e6cfff0d;
}
.skeleton::after,
.case-detail[data-state="loading"] [data-loading-field]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 22%, #ea69c510 40%, #b9cfff24 50%, #67dbef10 60%, transparent 78%);
  transform: translateX(-100%);
  animation: vault-shimmer 2.1s ease-in-out infinite;
  pointer-events: none;
}
.skeleton-line { height: 11px; width: 100%; margin: 8px 0; }
.skeleton-line.short { width: 48px; }
.skeleton-line.medium { width: 90px; max-width: 70%; }
.skeleton-line.wide { width: 140px; max-width: 90%; }
.skeleton-card { pointer-events: none; box-shadow: inset 0 1px 0 #e6cfff0a; }
.skeleton-card .case-copy { min-width: 0; }
.skeleton-chest { width: 78%; height: 72%; border-radius: 22% 22% 12% 12%; transform: rotate(-6deg); }
.skeleton-gift { width: 40%; height: 78%; border-radius: 12px; transform: rotate(-9deg); }
.skeleton-level { width: 70%; height: 45px; margin: 25px 0; }
.skeleton-row { display: flex; align-items: center; gap: 14px; padding: 18px 12px; border-bottom: 1px solid var(--line); }
.skeleton-row > div { flex: 1; min-width: 0; }
.skeleton-avatar { width: 40px; height: 40px; flex: none; border-radius: 10px; }
.rail-activity .skeleton-row { gap: 9px; padding: 15px 0; }
.rail-activity .skeleton-avatar { width: 28px; height: 28px; }
.rail-activity .skeleton-row > .short { width: 24px; }
.case-detail[data-state="loading"] [data-loading-field] {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  color: transparent;
  background: linear-gradient(125deg, #38224080, #202440, #18344480);
  user-select: none;
}
.case-detail[data-state="loading"] [data-loading-field] * { visibility: hidden; }
.case-detail[data-state="loading"] #case-description { min-height: 60px; }
.case-detail[data-state="loading"] #case-max,
.case-detail[data-state="loading"] #case-count { min-width: 50px; min-height: 28px; }
.case-detail[data-state="loading"] #case-price { min-width: 110px; }
.stage-skeleton { position: absolute; inset: 22% 21%; display: grid; place-items: center; pointer-events: none; }
.stage-skeleton .skeleton-chest { width: 85%; height: 65%; box-shadow: inset 0 1px 0 #d29dff22, 0 0 80px #da359b10; }
.loading-error { grid-column: 1 / -1; padding: 22px; border: 1px solid #76446070; border-radius: var(--radius); background: linear-gradient(115deg,#321e354d,#16293d66); }
.loading-error strong { display: block; margin-bottom: 8px; }
.loading-error p { font-size: 12px; }
.loading-error button { margin-top: 12px; }
.startup-error { position: fixed; z-index: 100; left: 50%; top: 90px; transform: translateX(-50%); width: min(420px, calc(100% - 32px)); background-color: #151427; box-shadow: 0 20px 70px #0008; }
[data-state="ready"] > .skeleton-card { display: none; }
@keyframes vault-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .skeleton::after, .case-detail[data-state="loading"] [data-loading-field]::after { animation: none; transform: none; opacity: .35; }
}