/* Wyrd — loom.css : the ornament. The thread, the loom, the hoard's glow. */
.thread { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.thread svg { flex: 0 0 auto; }
.thread .t-line { stroke: var(--gold); stroke-width: 3; fill: none; stroke-linecap: round; }
.thread.frayed .t-line { stroke: var(--warn); stroke-dasharray: 6 5; }
.thread.cold .t-line { stroke: var(--line); }
.thread .t-knot { fill: var(--gold); }
.thread.frayed .t-knot { fill: var(--warn); }
.thread.cold .t-knot { fill: var(--line); }
.thread .t-text b { display: block; font-family: var(--display); font-size: 17px; }
.thread .t-text span { color: var(--muted); font-size: 13px; }

/* the living scene */
.pixel { width: 100%; height: auto; display: block; image-rendering: pixelated; image-rendering: crisp-edges; background: #0d1117; cursor: pointer; }
.scene-card { overflow: hidden; }
.scene-cap { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; }
.scene-cap .t-text b { display: block; font-family: var(--display); font-size: 16px; }
.scene-cap .t-text span { color: var(--muted); font-size: 12.5px; }
.scene-hoard { text-align: right; flex: 0 0 auto; }
.scene-hoard small { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.scene-hoard b { font-family: var(--display); font-size: 18px; color: var(--gold); }

.hoard-glow { position: relative; overflow: hidden; }
.hoard-glow::after { content: ""; position: absolute; inset: -40% -20% auto; height: 70%; background: radial-gradient(ellipse at center, rgba(255, 215, 120, .35), transparent 70%); pointer-events: none; }

.recap { display: grid; gap: 10px; }
.recap .recap-head { text-align: center; }
.recap .recap-head .kicker { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); }
.recap .recap-head h2 { font-size: 22px; margin-top: 2px; }
.recap .recap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.recap .recap-grid .tile { padding: 9px; }

.rune-divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin: 18px 0 8px; }
.rune-divider::before, .rune-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

@media (prefers-reduced-motion: no-preference) {
  .bar i { transition: width .35s ease; }
  .badge-card .badge-sigil { animation: reveal .5s cubic-bezier(.2, .8, .2, 1.2); }
  .tile.treasure { transition: background .3s, color .3s; }
  @keyframes reveal { from { transform: scale(.4) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
}