/* ================================================================
   Vaultia — Workstation Reward/Identity Systems
   Momentum ring, seals, desk board, familiar, chronicle modal tweaks
   ================================================================ */

/* ── Momentum Ring ─────────────────────────────────────────────── */
.momentum-ring-wrap {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  pointer-events: none;
  z-index: 2;
}

.momentum-ring-svg {
  display: block;
}

@keyframes mr-prism-spin {
  from { transform: rotate(-90deg); }
  to   { transform: rotate(270deg); }
}

/* ── Avatar Frame ──────────────────────────────────────────────── */
.avatar-frame-wrap svg {
  width: 100%;
  height: 100%;
}

/* ── Desk Board ───────────────────────────────────────────────── */
.profile-desk {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 60px rgba(0,0,0,0.55);
}

.desk-material-label {
  position: absolute;
  right: 12px;
  bottom: 10px;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  opacity: 0.65;
  pointer-events: none;
}

.desk-artifact {
  position: absolute;
  padding: 4px;
  border-radius: 14px;
  cursor: grab;
  user-select: none;
  transition: transform var(--t-fast), filter var(--t-fast);
}

.desk-artifact:hover {
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.10));
  transform: translateY(-1px);
}

.desk-artifact.dragging {
  cursor: grabbing;
  transform: scale(1.02);
}

/* ── Familiar (weighted motion only) ───────────────────────────── */
.familiar-container {
  width: 72px;
  height: 72px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}

.familiar-svg {
  transform-origin: 50% 70%;
  animation: fam-breathe 6.8s ease-in-out infinite;
}

@keyframes fam-breathe {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.96; }
  50%      { transform: translateY(-0.4px) scale(1.01); opacity: 1; }
}

/* Idle/reaction classes (small, calm) */
.fam-anim-look-left { animation: fam-look-left 1.6s ease-in-out both; }
.fam-anim-look-right { animation: fam-look-right 1.6s ease-in-out both; }
.fam-anim-ear-twitch { animation: fam-ear 1.2s ease-in-out both; }
.fam-anim-bob { animation: fam-bob 1.0s ease-in-out both; }
.fam-anim-slow-blink { animation: fam-blink 1.4s ease-in-out both; }
.fam-anim-tail-wag { animation: fam-tail 1.4s ease-in-out both; }
.fam-anim-alert-stand { animation: fam-alert 1.3s ease-in-out both; }
.fam-anim-extend-neck { animation: fam-neck 1.4s ease-in-out both; }

@keyframes fam-look-left {
  0% { transform: translateX(0) translateY(0) scale(1); }
  50% { transform: translateX(-1.2px) translateY(-0.2px) scale(1.01); }
  100% { transform: translateX(0) translateY(0) scale(1); }
}
@keyframes fam-look-right {
  0% { transform: translateX(0) translateY(0) scale(1); }
  50% { transform: translateX(1.2px) translateY(-0.2px) scale(1.01); }
  100% { transform: translateX(0) translateY(0) scale(1); }
}
@keyframes fam-ear {
  0%, 100% { transform: rotate(0deg) scale(1); }
  40% { transform: rotate(-1.2deg) scale(1.01); }
  70% { transform: rotate(0.8deg) scale(1.01); }
}
@keyframes fam-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.2px); }
}
@keyframes fam-blink {
  0%, 100% { opacity: 1; }
  45% { opacity: 0.85; }
  55% { opacity: 0.85; }
}
@keyframes fam-tail {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(0.8deg); }
  75% { transform: rotate(-0.8deg); }
}
@keyframes fam-alert {
  0% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-1.4px) scale(1.02); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes fam-neck {
  0% { transform: translateY(0); }
  45% { transform: translateY(-1px); }
  100% { transform: translateY(0); }
}

/* Material effects */
.fam-material-ink {
  filter: drop-shadow(0 0 10px rgba(180,100,255,0.35));
}
.fam-material-celestial {
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.06), rgba(0,0,0,0));
}

/* ── Void Theme (prestige unlock) ──────────────────────────────── */
body.theme-void {
  --bg-base:        #050509;
  --bg-surface:     #0b0b12;
  --bg-panel:       rgba(10, 10, 18, 0.92);
  --bg-glass:       rgba(255, 255, 255, 0.03);
  --border-subtle:  rgba(255, 255, 255, 0.055);
  --border-normal:  rgba(255, 255, 255, 0.11);
  --text-primary:   rgba(255, 255, 255, 0.93);
  --text-secondary: rgba(255, 255, 255, 0.56);
  --text-muted:     rgba(255, 255, 255, 0.30);
}

/* ================================================================
   Trophy Board — TrophyBoard.js
   ================================================================ */

.trophy-board {
  /* subtle inner board background */
  background: linear-gradient(160deg, rgba(255,255,255,0.018), transparent);
  border-radius: 10px;
}

/* Trophy cards — hover glow using the border colour that's already inline */
.tb-card:hover {
  border-color: rgba(255,255,255,0.14) !important;
  box-shadow: 0 0 12px rgba(255,255,255,0.04);
}

/* Pin button becomes more visible on card hover */
.tb-card:hover .tb-pin { opacity: 0.55 !important; }

/* Companion strip — subtle inner shadow for depth */
#tb-companion {
  box-shadow: inset 0 6px 12px rgba(0,0,0,0.18);
}

/* ── Viewer Profile Page ─────────────────────────────────────────── */
.vp-stat-chip {
  background: var(--bg-hover);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
  flex: 1;
  min-width: 60px;
}
.vp-stat-chip .val {
  font-size: 0.9rem;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--text-primary);
}
.vp-stat-chip .lbl {
  font-size: 0.58rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-top: 2px;
}