/* market-movers.css */
/* Self-contained market movers styles for SlabHQ */

  .movers-section { padding: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); }
  .movers-header-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 1.5rem 6px; }
  .movers-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; letter-spacing: 2px; color: var(--text); }
  .movers-title span { color: var(--accent); }
  .movers-updated { font-size: 0.65rem; color: var(--muted); letter-spacing: 0.5px; }
  .mover-tab { background: transparent; border: none; color: var(--muted); font-family: 'DM Sans', sans-serif; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.3px; padding: 4px 10px; cursor: pointer; border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s; outline: none; }
  .mover-tab:hover { color: var(--text); }
  .mover-tab.active { color: var(--text); border-bottom-color: var(--text); }
  .movers-dropdown { display: none; border-top: 1px solid var(--border); background: var(--surface); }
  .movers-dropdown.open { display: block; }
  .movers-card-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; padding: 0.75rem 1.5rem 1rem; }
  .movers-card-tile { cursor: pointer; border-radius: 8px; overflow: hidden; background: var(--surface2); border: 1px solid var(--border); transition: transform 0.15s, border-color 0.15s; }
  .movers-card-tile:hover { transform: translateY(-2px); border-color: var(--accent); }
  .movers-card-img { width: 100%; aspect-ratio: 3/4; background: linear-gradient(135deg, var(--surface2), var(--border)); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
  .movers-card-img img { width: 100%; height: 100%; object-fit: contain; }
  .movers-card-img .card-emoji { font-size: 1.5rem; }
  .movers-card-rank { position: absolute; top: 4px; left: 4px; background: rgba(0,0,0,0.6); color: #fff; font-size: 0.55rem; font-weight: 700; padding: 1px 5px; border-radius: 4px; font-family: 'DM Mono', monospace; }
  .movers-card-body { padding: 4px 5px 5px; }
  .movers-card-name { font-size: 0.62rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .movers-card-set { font-size: 0.55rem; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .movers-card-chg { font-size: 0.72rem; font-weight: 800; margin-top: 4px; font-family: 'DM Mono', monospace; }
  .movers-card-chg.up { color: var(--green); }
  .movers-card-chg.down { color: #ef4444; }
  .ticker-wrap { overflow: hidden; position: relative; padding: 0; }
  .ticker-wrap::before { content:''; position:absolute; left:0; top:0; bottom:0; width:60px; background:linear-gradient(90deg,var(--surface),transparent); z-index:2; pointer-events:none; }
  .ticker-wrap::after { content:''; position:absolute; right:0; top:0; bottom:0; width:60px; background:linear-gradient(270deg,var(--surface),transparent); z-index:2; pointer-events:none; }
  .ticker-track { display: flex; gap: 0; animation: tickerScroll 40s linear infinite; width: max-content; }
  .ticker-track:hover { animation-play-state: paused; }
  .ticker-item { display: flex; align-items: center; gap: 10px; padding: 8px 20px; cursor: pointer; border-right: 1px solid var(--border); transition: background 0.15s; flex-shrink: 0; min-width: 200px; }
  .ticker-item:hover { background: rgba(0,200,5,0.04); }
  .ticker-item-img { width: 36px; height: 50px; border-radius: 5px; overflow: hidden; background: var(--surface2); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
  .ticker-item-img img { width: 100%; height: 100%; object-fit: contain; }
  .ticker-item-info { flex: 1; min-width: 0; }
  .ticker-item-name { font-size: 0.78rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
  .ticker-item-set { font-size: 0.62rem; color: var(--muted); margin-top: 1px; white-space: nowrap; }
  .ticker-item-price { text-align: right; flex-shrink: 0; }
  .ticker-item-price-val { font-family: 'DM Mono', monospace; font-size: 0.85rem; font-weight: 700; color: var(--text); }
  .ticker-item-change { font-size: 0.65rem; font-weight: 700; margin-top: 1px; }
  .ticker-item-change.up { color: var(--green); }
  .ticker-item-change.down { color: #ef4444; }