/* HotAssetCard - the "most active asset" card (js/hot-asset-card.js). Fire treatment when an asset
   clears the activity-spike bar, calm accent treatment otherwise. Loaded on the scanner + asset pages.
   Fire colour is a distinct orange (#ff7a3c) - deliberately NOT the flow or price-change palette. */
.hac-host { padding: 8px 8px 0; }
.hac { display: block; text-decoration: none; color: var(--text-hi); border-radius: var(--r-lg, 12px); padding: 12px 14px; position: relative; overflow: hidden; border: 1px solid var(--border); background: var(--bg-card); transition: transform .1s ease; }
.hac:hover { transform: translateY(-1px); }
.hac[hidden] { display: none; }
.hac-calm { border-color: color-mix(in srgb, var(--accent-2) 40%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 60%), var(--bg-card); }
.hac-fire { border-color: rgba(255, 122, 60, .5); background: linear-gradient(135deg, rgba(255, 122, 60, .16), rgba(255, 60, 60, .05) 60%), var(--bg-card); animation: hacGlow 2.4s ease-in-out infinite; }
@keyframes hacGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 122, 60, 0); } 50% { box-shadow: 0 0 14px 0 rgba(255, 122, 60, .28); } }

.hac-eyebrow { display: flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-2); }
.hac-fire .hac-eyebrow { color: #ff7a3c; }
.hac-eyebrow .mat-ic { font-size: 14px; }
.hac-fire .hac-eyebrow .mat-ic { animation: hacFlame 1.8s ease-in-out infinite; transform-origin: center; }
@keyframes hacFlame { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.14); opacity: 1; } }
.hac-win { margin-left: auto; color: var(--text-lo); font-weight: 600; letter-spacing: .02em; }

.hac-head { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.hac-ico { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; display: inline-grid; place-items: center; flex: none; background: var(--bg-active); }
.hac-ico img, .hac-ico span { width: 100% !important; height: 100% !important; border-radius: 50% !important; object-fit: cover; margin: 0 !important; }
.hac-sym { font-family: var(--mono); font-size: 15px; font-weight: 800; color: var(--text-hi); }

.hac-metric { margin-top: 9px; font-family: var(--mono); font-size: 12px; color: var(--text-md); }
.hac-metric b { font-family: var(--mono); font-size: 22px; font-weight: 800; color: var(--text-hi); margin-right: 4px; }
.hac-fire .hac-metric b { color: #ff8a4c; }
.hac-sub { margin-top: 2px; font-family: var(--mono); font-size: 11px; color: var(--text-md); }
.hac-spark { display: block; width: 100%; height: 30px; margin-top: 9px; }
.hac-cta { margin-top: 10px; display: inline-flex; align-items: center; gap: 3px; font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--accent-2); }
.hac-fire .hac-cta { color: #ff7a3c; }
.hac-cta .mat-ic { font-size: 15px; }

/* Podium runners-up (#2 / #3) - compact rows under the hero card. Graded ember flame (r2 brighter than
   r3) keeps the 1/2/3 ranking readable while staying in the fire metaphor (no medals). */
.hac-runners { margin-top: 7px; display: flex; flex-direction: column; gap: 1px; }
.hac-run { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px; text-decoration: none; color: var(--text-md); transition: background-color .1s; }
.hac-run:hover { background: var(--bg-hover); }
.hac-run-flame { display: inline-flex; flex: none; color: #ff9e63; }
.hac-run-flame .mat-ic { font-size: 13px; }
.hac-run-flame.r3 { color: #ffb488; opacity: .82; }
.hac-run-flame.r3 .mat-ic { font-size: 12px; }
.hac-run-ico { width: 18px; height: 18px; border-radius: 50%; overflow: hidden; display: inline-grid; place-items: center; flex: none; background: var(--bg-active); }
.hac-run-ico img, .hac-run-ico span { width: 100% !important; height: 100% !important; border-radius: 50% !important; object-fit: cover; margin: 0 !important; }
.hac-run-sym { font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: var(--text-hi); }
.hac-run-mult { font-family: var(--mono); font-size: 11px; font-weight: 700; color: #ff8a4c; }
.hac-run-cnt { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--text-lo); }

@media (prefers-reduced-motion: reduce) {
  .hac-fire { animation: none; }
  .hac-fire .hac-eyebrow .mat-ic { animation: none; }
}