/* Curious Market — real-company stock game */

.market-wrap { max-width: 640px; margin: 0 auto; padding: 16px; }

.market-balance {
  display: inline-block; margin-top: 6px; padding: 6px 14px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 50px; font-size: var(--text-sm); font-weight: 700;
}
.market-trades-chip { color: var(--color-text-muted); font-weight: 600; }

.market-banner {
  padding: 10px 14px; border-radius: var(--radius-md); margin-bottom: 12px;
  font-size: var(--text-sm); background: color-mix(in srgb, #f59e0b 12%, var(--color-surface));
  border: 1px solid color-mix(in srgb, #f59e0b 35%, transparent);
}
.market-banner.calm { background: color-mix(in srgb, #3b82f6 10%, var(--color-surface)); border-color: color-mix(in srgb, #3b82f6 30%, transparent); }
.market-banner.red-day { background: color-mix(in srgb, #dc2626 10%, var(--color-surface)); border-color: color-mix(in srgb, #dc2626 30%, transparent); }

.market-intro-card {
  padding: 14px; border-radius: var(--radius-lg); margin-bottom: 14px;
  background: color-mix(in srgb, #8b5cf6 10%, var(--color-surface));
  border: 2px solid color-mix(in srgb, #8b5cf6 30%, transparent);
  font-size: var(--text-sm); line-height: 1.6;
}

.market-row {
  display: grid; grid-template-columns: auto 1fr 60px auto auto;
  gap: 10px; align-items: center;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 10px 12px; margin-bottom: 8px;
}
.market-row-emoji { font-size: 1.8rem; cursor: pointer; }
.market-row-main { cursor: pointer; min-width: 0; }
.market-row-name { font-weight: 800; font-size: var(--text-sm); }
.market-info-hint { color: var(--color-text-faint); font-size: var(--text-xs); }
.market-row-blurb { font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.market-spark { width: 60px; height: 24px; }
.market-row-price { text-align: right; font-weight: 800; font-size: var(--text-sm); }
.market-delta { font-size: var(--text-xs); font-weight: 700; }
.market-delta.up, .market-pos-line.up { color: #16a34a; }
.market-delta.down, .market-pos-line.down { color: #dc2626; }

.market-buy-btn, .market-sell-btn, .market-cancel-btn {
  padding: 8px 16px; border-radius: var(--radius-md); border: none;
  background: var(--color-primary); color: white; font-family: var(--font-display);
  font-weight: 700; font-size: var(--text-sm); cursor: pointer;
}
.market-sell-btn { background: #dc2626; }
.market-cancel-btn { background: var(--color-surface-2); color: var(--color-text); }
.market-buy-btn.locked, .market-sell-btn.locked, .got-it-btn.locked { opacity: 0.4; cursor: not-allowed; }

.market-report-card {
  margin: -4px 0 10px; padding: 12px 14px;
  background: color-mix(in srgb, #3b82f6 7%, var(--color-surface));
  border: 1px dashed color-mix(in srgb, #3b82f6 35%, transparent);
  border-radius: var(--radius-md); font-size: var(--text-sm); line-height: 1.55;
}
.market-fact { margin-bottom: 6px; }
.market-fun { font-size: var(--text-xs); color: var(--color-text-muted); }
.market-fact-note { font-size: var(--text-xs); color: var(--color-text-faint); margin-top: 4px; }

.market-term {
  text-decoration: underline dotted; text-underline-offset: 2px;
  cursor: pointer; font-weight: 700; color: var(--color-primary);
}

.market-position-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 12px; margin-bottom: 8px;
  position: relative;
}
.market-pos-head { font-size: var(--text-sm); margin-bottom: 4px; }
.market-pos-line { font-size: var(--text-xs); margin: 2px 0; }
.market-position-card .market-sell-btn { position: absolute; right: 12px; top: 12px; }
.market-pos-total { font-size: var(--text-sm); font-weight: 700; padding: 6px 2px; }

.market-trade-panel {
  position: sticky; bottom: 12px;
  background: var(--color-surface); border: 2px solid var(--color-primary);
  border-radius: var(--radius-lg); padding: 14px; margin-top: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.market-trade-title { font-weight: 800; font-size: var(--text-sm); margin-bottom: 8px; }
.market-qty-row { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.market-qty-btn {
  padding: 8px 14px; border-radius: var(--radius-md);
  border: 2px solid var(--color-border); background: var(--color-surface-2);
  color: var(--color-text); font-weight: 700; cursor: pointer; font-size: var(--text-sm);
}
.market-qty-btn.active { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 12%, transparent); }
.market-trade-total { font-size: var(--text-sm); margin-bottom: 8px; }
.market-trade-btns { display: flex; gap: 10px; }

@media (max-width: 520px) {
  .market-row { grid-template-columns: auto 1fr auto auto; }
  .market-spark { display: none; }
}