/*
 * Visual direction 03 — consumer sportsbook.
 * Presentation only. Product behavior remains governed by PVP_MARKETS_PROGRAM.md.
 */

:root {
  --bg: #f2f5f9;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --surface-3: #eaf0f7;
  --border: #dce4ee;
  --border-strong: #c6d1df;
  --text: #0b1930;
  --muted: #5d6b7e;
  --subtle: #8b98a9;
  --acid: #1769ff;
  --acid-ink: #ffffff;
  --violet: #6a50f6;
  --blue: #1769ff;
  --orange: #e17a14;
  --red: #dc3651;
  --success: #098754;
  --shadow: 0 14px 38px rgba(17, 36, 67, 0.08);
  --radius: 12px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 20px;
}

html { background: var(--bg); }

body {
  color: var(--text);
  background: var(--bg);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-feature-settings: "tnum" 1, "ss01" 1;
}

.prototype-banner {
  min-height: 24px;
  padding: 4px 16px;
  gap: 9px;
  color: #dce8ff;
  background: #07152a;
  font-size: 8px;
  letter-spacing: .14em;
}

.prototype-banner span + span {
  border-color: rgba(255,255,255,.16);
  opacity: .6;
}

.topbar {
  top: 0;
  height: 68px;
  padding: 0 28px;
  border-bottom: 0;
  color: #fff;
  background: #0b1f3b;
  box-shadow: 0 6px 24px rgba(5, 20, 42, .16);
  backdrop-filter: none;
}

.brand { gap: 10px; }

.brand-mark {
  width: 34px;
  height: 34px;
  gap: 4px;
  padding: 5px;
  border: 0;
  border-radius: 10px;
  background: #1769ff;
  box-shadow: 0 5px 16px rgba(23, 105, 255, .32);
  transform: none;
}

.brand-mark i { border-radius: 3px; background: #fff; }
.brand-mark i:last-child { background: #82c8ff; }

.brand-wordmark { display: flex; align-items: baseline; gap: 7px; }
.brand-wordmark b { color: #fff; font-size: 19px; letter-spacing: -.035em; }
.brand-wordmark small { color: #9bb4d4; font-size: 7px; font-weight: 900; letter-spacing: .18em; }

.desktop-nav {
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 11px;
  background: rgba(0,0,0,.12);
}

.nav-link {
  min-height: 38px;
  padding-inline: 17px;
  border-radius: 8px;
  color: #9fb4cf;
  font-size: 11px;
}

.nav-link:hover,
.nav-link.is-active { color: #fff; background: rgba(255,255,255,.12); }

.topbar-actions { gap: 8px; }

.chain-pill,
.wallet-button {
  min-height: 42px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 9px;
  color: #fff;
  background: rgba(255,255,255,.075);
  box-shadow: none;
}

.chain-pill { color: #c1d0e3; }
.chain-dot { background: #2fd295; box-shadow: 0 0 0 4px rgba(47,210,149,.1); }
.wallet-indicator { background: #6aa7ff; box-shadow: 0 0 0 4px rgba(106,167,255,.12); }

.button {
  min-height: 44px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 800;
  box-shadow: none;
}

.button-primary {
  color: #fff;
  border-color: #1769ff;
  background: #1769ff;
  box-shadow: 0 7px 18px rgba(23,105,255,.2);
}

.button-primary:hover { background: #0758e7; }

.button-secondary {
  color: #19304c;
  border-color: #d3deea;
  background: #fff;
}

.button-secondary:hover { border-color: #aebdd0; background: #f7f9fc; }
.button-ghost { color: #5d6b7e; }
.button-ghost:hover { color: #0b1930; background: #eef3f8; }
.button-danger { color: #c82543; border-color: #f0c8d0; background: #fff5f6; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(23,105,255,.48) !important;
  outline-offset: 2px;
}

.market-subnav {
  height: 48px;
  border-bottom: 1px solid #dce4ee;
  background: #fff;
}

.market-subnav > div {
  width: min(1320px, calc(100% - 48px));
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  gap: 28px;
}

.market-subnav button {
  min-width: max-content;
  position: relative;
  padding: 0;
  color: #68778a;
  background: transparent;
  font-size: 11px;
  font-weight: 800;
}

.market-subnav button::after {
  content: "";
  height: 3px;
  position: absolute;
  inset: auto 0 0;
  border-radius: 3px 3px 0 0;
  background: #1769ff;
  opacity: 0;
}

.market-subnav button:hover,
.market-subnav button.is-active { color: #0b1930; }
.market-subnav button.is-active::after { opacity: 1; }

.page-shell {
  width: min(1320px, calc(100% - 48px));
  padding-top: 30px;
}

.narrow-shell { width: min(1120px, calc(100% - 48px)); }
.detail-shell { width: min(1180px, calc(100% - 48px)); }

.market-page-heading {
  min-height: 62px;
  margin-bottom: 16px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.market-page-heading h1 {
  margin: 3px 0 2px;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -.04em;
}

.market-page-heading p { margin: 0; color: var(--muted); font-size: 12px; }

.market-stats { display: flex; gap: 15px; }
.market-stats span { color: var(--muted); font-size: 10px; font-weight: 700; }
.market-stats b { margin-right: 3px; color: #10233e; font-size: 13px; }

.eyebrow,
.kicker,
.preview-label {
  color: #1769ff;
  font-size: 8px;
  letter-spacing: .14em;
}

.pulse { background: #25b67c; box-shadow: 0 0 0 4px rgba(37,182,124,.11); }

/* Marketplace component anatomy and breakpoints are owned in the market block below. */
.section-heading h2, .page-intro h1 { font-size: 25px; color: #0b1930; }
.compact-action { min-height: 40px; padding-inline: 14px; }

.filters { margin: 15px 0 10px; }
.segmented,
.activity-tabs,
.asset-tabs { border: 1px solid #d9e2ed; border-radius: 10px; background: #e9eef5; }
.filter-chip,
.activity-tabs button,
.asset-tabs button { min-height: 38px; border-radius: 7px; color: #647488; font-size: 10px; }
.filter-chip.is-active,
.activity-tabs button.is-active,
.asset-tabs button.is-active { color: #10233e; background: #fff; box-shadow: 0 2px 8px rgba(27,48,79,.08); }

.search-box {
  min-height: 42px;
  border-color: #d5dfea;
  border-radius: 9px;
  color: #6d7c8e;
  background: #fff;
  box-shadow: 0 1px 2px rgba(13,31,56,.03);
}
.search-box input { color: #10233e; }
.search-box:focus-within { border-color: #4e8fff; box-shadow: 0 0 0 3px rgba(23,105,255,.11); }

.challenge-list { gap: 9px; }

.challenge-card,
.rail-card,
.form-card,
.preview-card,
.x-origin-card,
.review-card,
.challenge-detail-card,
.accept-card,
.timeline-card,
.terms-panel,
.activity-list article,
.ranking-table,
.profile-panel {
  border: 1px solid #dbe4ee;
  color: #0b1930;
  background: #fff;
  box-shadow: 0 5px 18px rgba(20,42,73,.055);
}

.challenge-card {
  padding: 17px 18px 15px;
  border-radius: 12px;
}

.challenge-card:hover { border-color: #b6c8db; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(20,42,73,.085); }
.challenge-accent { width: 4px; }
.stock-accent { background: #1769ff; }
.crypto-accent { background: #ec922a; }
.versus-accent { background: #7658ff; }

.asset-identity strong { color: #10233e; }
.asset-identity span { color: #758499; }
.asset-logo { box-shadow: inset 0 0 0 1px rgba(0,0,0,.045); }
.status-open { color: #08764a; border-color: #bde7d4; background: #eefaf4; }

.challenge-prediction { padding-top: 15px; }
.challenge-prediction h3 { color: #0b1930; font-size: 18px; line-height: 1.22; }
.challenge-prediction h3 em { color: #1769ff; }
.quote-mark { color: #1769ff; }
.price-row { color: var(--muted); }
.price-row b { color: #0b1930; }
.price-up { color: #098754 !important; }
.price-down { color: #d93450 !important; }

.challenge-footer { margin-top: 15px; padding-top: 14px; border-top-color: #e4eaf1; }
.challenger strong, .stake-box strong { color: #0b1930; }
.challenger span, .stake-box span { color: #8491a1; }
.market-pick { min-width: 152px; padding: 6px 13px; flex-direction: column; align-items: center; gap: 1px; }
.market-pick span { font-size: 8px; letter-spacing: .08em; }
.market-pick b { font-size: 11px; }

.market-rail { gap: 11px; }
.rail-card { padding: 17px; border-radius: 12px; }
.rail-heading h2 { color: #10233e; font-size: 12px; }
.rail-heading > span { color: #1769ff; font-size: 7px; }


.ticker-list > div { border-color: #e6ebf1; }
.ticker-list strong, .ticker-list b { color: #10233e; }
.source-note, .microcopy { color: var(--muted); }
.social-post > p, .x-post-text { color: #33455c; }
.social-post > p b, .x-post-text b { color: #1769ff; }
.leaderboard-mini li { border-color: #e6ebf1; }
.leaderboard-mini li strong, .leaderboard-mini li > b { color: #10233e; }

.empty-state { border-color: #cad6e3; background: #fff; }
.empty-state h3 { color: #10233e; }

/* Creation, review, challenge, live, activity, profile */
.page-intro { padding-top: 5px; }
.page-intro > p, .live-header p { color: #66768a; }
.back-link { color: #53667d; }
.form-card, .review-card { border-radius: 15px; }
.form-section { border-color: #e3e9f0; }
.step-title > span { color: #fff; border-color: #1769ff; background: #1769ff; }
.step-title h2 { color: #10233e; }
.step-title p { color: var(--muted); }
.choice-card { border-color: #d6e0eb; color: #10233e; background: #f8fafc; }
.choice-card:hover { border-color: #aac1d9; }
.choice-card.is-selected { border-color: #1769ff; background: #eef4ff; box-shadow: 0 0 0 1px #1769ff; }
.choice-icon { color: #1769ff; background: #e4eeff; }
.choice-card small { color: var(--muted); }

.field > span { color: #53667d; }
.field input,
.field select,
.select-control,
.input-prefix,
.input-suffix { border-color: #ccd8e5; color: #10233e; background: #fff; }
.field input:hover,
.field select:hover,
.select-control:hover { border-color: #9fb4ca; }
.field input:focus,
.field select:focus,
.select-control:focus,
.input-prefix:focus-within,
.input-suffix:focus-within { border-color: #1769ff; box-shadow: 0 0 0 3px rgba(23,105,255,.11); }
.input-prefix input, .input-suffix input { background: transparent; }

.market-rule-note,
.ambiguity-callout,
.open-warning,
.cancel-rule,
.safe-callout { border-color: #d6e5fa; background: #f4f8ff; }
.market-rule-note p,
.ambiguity-callout p,
.open-warning p,
.cancel-rule p,
.safe-callout p { color: #566a82; }
.quick-stakes button { color: #617287; border-color: #d3deea; background: #f8fafc; }
.quick-stakes button:hover,
.quick-stakes button.is-active { color: #1769ff; border-color: #1769ff; background: #eef4ff; }
.toggle-row { border-color: #d6e0eb; color: #10233e; background: #f8fafc; }
.toggle-row small { color: var(--muted); }
.toggle-row i { background: #cbd5e1; }
.toggle-row input:checked + i { background: #1769ff; }

.preview-card, .accept-card { border-color: #bdcce0; }
.preview-label { color: var(--muted); }
.preview-card > h2, .accept-heading strong { color: #10233e; }
.preview-versus, .duel-row { border-color: #e0e7ef; }
.preview-versus small, .duel-row small { color: var(--muted); }
.terms-list > div { border-color: #e5eaf0; }
.terms-list dt { color: var(--muted); }
.terms-list dd { color: #10233e; }
.highlight-term { border-color: #bcd0f4 !important; background: #eef4ff !important; }
.highlight-term dd { color: #1769ff !important; }
.cancel-rule, .safe-callout { border-color: #c9e8da; background: #f0faf5; }

.x-origin-card { border-color: #c9d5e2; }
.x-origin-heading small, .x-post-meta { color: var(--muted); }
.review-header > div > span { color: #1769ff; }
.review-header h2 { color: #10233e; }
.terms-summary > div { border-color: #dce4ee; background: #f8fafc; }
.terms-summary span { color: var(--muted); }
.review-legal { border-color: #dce4ee; background: #f8fafc; }
.review-legal label { color: #5e6f83; }

.challenge-detail-card { border-radius: 15px; }
.challenge-detail-heading { border-color: #e2e8f0; }
.detail-call h1 { color: #0b1930; }
.detail-player span { color: var(--muted); }
.chart-card, .rules-box { border-color: #dbe4ee; background: #f8fafc; }
.chart-heading strong, .rules-box h3 { color: #10233e; }
.chart-range { background: #e9eef5; }
.chart-range button { color: #65758a; }
.chart-range button.is-active { color: #10233e; background: #fff; }
.gridlines line { stroke: #dfe6ee; }
.target-line { stroke: #7558f5; }
.target-label { fill: #7558f5; }
.chart-line { stroke: #1769ff; }
.chart-point { fill: #1769ff; stroke: rgba(23,105,255,.22); }
.rules-box li { color: #69798d; }
.rules-box li b { color: #10233e; }

.live-duel { border-color: #cbd8e6; background: linear-gradient(180deg, #fff, #f5f8fc); }
.live-player h2 { color: #10233e; }
.live-player p { color: var(--muted); }
.live-player > b { color: #1769ff; }
.live-vs > b { color: #10233e; border-color: #c5d2e0; background: #eaf0f7; }
.live-vs > span { color: #10233e; }
.timeline-card li { color: var(--muted); }
.timeline-card li::after { background: #dce4ee; }
.timeline-card li > span { border-color: #d3dde8; background: #f4f7fa; }
.timeline-card li.is-done > span { color: #fff; border-color: #1769ff; background: #1769ff; }
.timeline-card li.is-current > span { color: #1769ff; border-color: #a9c5f7; background: #eef4ff; }
.timeline-card li.is-done b, .timeline-card li.is-current b { color: #10233e; }

.stats-strip { border-color: #dbe4ee; background: #fff; box-shadow: 0 5px 18px rgba(20,42,73,.05); }
.stats-strip > div { border-color: #e3e9f0; }
.stats-strip span { color: var(--muted); }
.stats-strip b { color: #10233e; }
.activity-list article { border-radius: 12px; }
.activity-copy h2 { color: #10233e; }
.activity-copy p { color: var(--muted); }
.result-win { color: #fff; background: #1769ff; }
.result-live { color: #08764a; background: #eaf8f1; }
.result-open { color: #b95e09; background: #fff4e8; }

.podium-place { border-color: #dbe4ee; background: #fff; box-shadow: 0 5px 18px rgba(20,42,73,.05); }
.podium-place.first { border-color: #acc4ec; background: linear-gradient(180deg, #edf4ff, #fff 48%); }
.podium-place h2, .ranking-row strong, .ranking-row b { color: #10233e; }
.podium-place p { color: var(--muted); }
.podium-place > b, .crown { color: #1769ff; }
.first .rank-medal { color: #fff; background: #1769ff; }
.ranking-head { color: var(--muted); background: #edf2f7; }
.ranking-row { border-color: #e3e9f0; color: #637489; }
.ranking-row.is-you { background: #f1f6ff; }

.profile-hero { border-color: #c8d6e5; background: linear-gradient(120deg, #fff, #eef5ff); box-shadow: var(--shadow); }
.profile-identity h1, .profile-calls h3, .badges-panel h2 { color: #10233e; }
.profile-identity p { color: var(--muted); }
.profile-avatar { box-shadow: 0 0 0 6px rgba(23,105,255,.09); }
.profile-calls article, .badge-grid > div { border-color: #dbe4ee; background: #f8fafc; }

/* Dialogs */
.modal {
  border-color: #cbd7e4;
  color: #0b1930;
  background: #fff;
  box-shadow: 0 30px 100px rgba(7,24,48,.28);
}
.modal::backdrop { background: rgba(6,20,39,.55); }
.modal-close { color: #607187; background: #eef2f6; }
.modal-step > h2, .asset-shell > h2 { color: #10233e; }
.modal-step > p { color: #66778b; }
.wallet-options button, .asset-results > button { border-color: #dbe4ee; color: #10233e; background: #f8fafc; }
.wallet-options button:hover, .asset-results > button:hover { border-color: #9fb8d2; background: #f1f6fb; }
.wallet-options button em, .asset-results > button small { color: var(--muted); }
.transaction-review { border-color: #dbe4ee; background: #f8fafc; }
.transaction-review > div { border-color: #e1e8ef; }
.transaction-review dt { color: var(--muted); }
.transaction-review dd { color: #10233e; }
.receipt-art { border-color: #183b68; color: #fff; background: linear-gradient(145deg, #0b2547, #102f58); }
.receipt-brand > span:last-child, .receipt-price span, .receipt-winner p, .receipt-proof { color: #b5c9df; }
.receipt-result > span, .receipt-winner span, .receipt-proof span:first-child { color: #64d8a4; }
.receipt-winner { border-color: rgba(255,255,255,.16); }
.modal-search { background: #fff; }
.request-asset { border-color: #c7d3df; }
.request-asset p { color: var(--muted); }
.toast { color: #fff; border-color: #213f62; background: #0b1f3b; }

.mobile-nav {
  border-top: 1px solid #d8e1eb;
  color: #6f7f92;
  background: rgba(255,255,255,.98);
  box-shadow: 0 -7px 24px rgba(16,37,66,.08);
}
.mobile-nav button.is-active { color: #1769ff; }

@media (max-width: 900px) {
  .market-page-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  .market-rail { grid-template-columns: 1fr 1fr; }
  .hero-copy { text-align: left; }
  .hero-copy > p { margin-inline: 0; }
  .hero-actions { justify-content: flex-start; }
}

@media (max-width: 640px) {
  body { padding-bottom: 72px; }
  .prototype-banner { min-height: 22px; font-size: 7px; }
  .prototype-banner span + span { display: none; }
  .topbar { height: 60px; padding: 0 14px; }
  .brand-mark { width: 31px; height: 31px; }
  .brand-wordmark small { display: none; }
  .chain-pill { display: none; }
  .wallet-button { min-height: 44px; padding-inline: 11px; }
  .wallet-label { font-size: 10px; }
  .market-subnav { height: 44px; }
  .market-subnav > div { width: calc(100% - 24px); gap: 22px; overflow-x: auto; scrollbar-width: none; }
  .market-subnav > div::-webkit-scrollbar { display: none; }
  .market-subnav button { min-width: 44px; min-height: 44px; }
  .page-shell, .narrow-shell, .detail-shell { width: calc(100% - 24px); padding: 18px 0 34px; }
  .market-page-heading { min-height: 0; margin-bottom: 14px; }
  .market-page-heading h1 { font-size: 25px; }
  .market-page-heading .kicker { display: none; }
  .market-stats { display: none; }
  .hero-actions { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: stretch; gap: 8px; }
  .hero-actions .button { min-width: 0; padding-inline: 12px; }
  .hero-actions .button-ghost { padding: 0; border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.08); }
  .hero-actions .share-label { display: none; }
  .section-heading h2 { font-size: 23px; }
  .compact-action { min-width: 44px; width: 44px; min-height: 44px; overflow: hidden; padding: 0; }
  .compact-action .compact-label { display: none; }
  .filters { margin-top: 13px; }
  .filter-chip { min-height: 44px; }
  .challenge-card { padding: 14px; }
  .challenge-prediction { padding-top: 12px; padding-bottom: 11px; }
  .challenge-prediction h3 { font-size: 17px; }
  .price-row { padding-bottom: 12px; }
  .challenge-footer { gap: 8px; margin-top: 9px; padding-top: 10px; }
  .market-pick { width: 100%; min-width: 0; }
  .market-rail { grid-template-columns: 1fr; }
  .form-card, .review-card { padding-inline: 17px; }
  .preview-card, .accept-card, .live-duel, .profile-hero, .modal { border-radius: 14px; }
}

/*
 * Visual direction 04 — product-first market terminal.
 * Flatter surfaces, fewer decorative containers, plain-language labels.
 */
:root {
  --bg: #f5f7fa;
  color-scheme: light;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --surface-3: #edf1f5;
  --border: #d9e1ea;
  --border-strong: #bcc8d5;
  --text: #101b2b;
  --muted: #5e6b7c;
  --subtle: #7f8b99;
  --acid: #1463ff;
  --blue: #1463ff;
  --shadow: 0 2px 8px rgba(15, 33, 56, .05);
  --radius: 8px;
  --radius-md: 10px;
  --radius-lg: 10px;
  --radius-xl: 12px;
}

.svg-sprite {
  width: 0;
  height: 0;
  position: absolute;
  overflow: hidden;
}

.ui-icon {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.prototype-banner {
  min-height: 30px;
  position: fixed;
  z-index: 80;
  left: 16px;
  bottom: 16px;
  justify-content: flex-start;
  padding: 7px 10px;
  border: 1px solid #d5dde7;
  border-radius: 7px;
  color: #536174;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 5px 18px rgba(14, 30, 50, .11);
  font-size: 9px;
  letter-spacing: 0;
  text-transform: none;
  backdrop-filter: blur(10px);
}

.prototype-banner span:first-child { color: #17253a; }
.prototype-banner span + span { border-color: #d9e1ea; opacity: 1; }

.topbar {
  height: 64px;
  padding-inline: max(24px, calc((100% - 1260px) / 2));
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  background: #0b1d35;
  box-shadow: none;
}

.brand-mark {
  width: 30px;
  height: 30px;
  padding: 5px;
  border-radius: 7px;
  background: #1463ff;
  box-shadow: none;
}

.brand-wordmark b { font-size: 18px; }
.brand-wordmark small { color: #91a6be; letter-spacing: .12em; }

.desktop-nav {
  align-self: stretch;
  gap: 25px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.nav-link {
  min-height: 64px;
  position: relative;
  padding: 0;
  border-radius: 0;
  color: #91a6be;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
}

.nav-link::after {
  content: "";
  height: 2px;
  position: absolute;
  inset: auto 0 0;
  background: #62a2ff;
  opacity: 0;
}

.nav-link:hover,
.nav-link.is-active { color: #fff; background: transparent; }
.nav-link.is-active::after { opacity: 1; }

.chain-pill,
.wallet-button {
  min-height: 38px;
  border-radius: 7px;
}

.wallet-button { color: #0f2240; border-color: #fff; background: #fff; }

.button {
  border-radius: 7px;
  font-size: 11px;
  font-weight: 750;
}

.button-primary { box-shadow: none; }

.market-subnav { height: 44px; border: 0; background: transparent; }
.market-subnav > div { width: 100%; height: 100%; gap: 20px; margin: 0; }
.market-subnav button { min-height: 44px; font-size: 13px; }

.page-shell { width: min(1260px, calc(100% - 48px)); padding-top: 24px; }
.narrow-shell { width: min(1100px, calc(100% - 48px)); }
.detail-shell { width: min(1180px, calc(100% - 48px)); }
/* PVP-UX-029: shared keylines, compact feature, one toolbar; no overlay rail. */
.market-shell {
  --market-gap: 16px;
  --market-inset: 16px;
  grid-template-columns: minmax(0, 1fr) 288px;
  align-items: start;
  gap: var(--market-gap) 24px;
}
.market-page-heading { grid-column: 1 / -1; min-height: 44px; margin: 0 0 4px; flex-direction: row; align-items: center; }
.market-page-heading h1 { margin: 0; font-size: 28px; line-height: 1.2; }
.market-feed { grid-column: 1; display: grid; gap: var(--market-gap); min-width: 0; }
.market-shell > .market-rail { grid-column: 2; grid-row: 2; }
.market-page-heading .kicker { display: none; }
.market-page-heading p { font-size: 12px; }

.eyebrow,
.kicker,
.preview-label {
  gap: 6px;
  color: #536174;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.hero-panel {
  min-height: 0;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 24px;
  padding: 20px 24px;
  color: #fff;
  border-color: #163a62;
  border-radius: 8px;
  background: #11365f;
  box-shadow: none;
}

.hero-panel::before,
.hero-panel::after { display: none; }
.hero-panel .eyebrow { color: #a9c7e7; }
.hero-copy h2 { max-width: 520px; margin: 8px 0 16px; color: #fff; font-size: 26px; line-height: 1.2; letter-spacing: -.025em; }
.hero-copy h2 span { color: #9ac7ff; }
.hero-copy > p { max-width: 500px; margin: 0 0 20px; color: #c5d5e7; font-size: 14px; line-height: 1.5; }
.hero-panel .eyebrow { font-size: 12px; }
.hero-actions { gap: 8px; align-items: center; }
.hero-actions .button { padding-inline: 14px; }
.hero-actions .button-primary { color: #0d2e54; border-color: #fff; background: #fff; }
.hero-actions .button-primary:hover { background: #e9f4ff; }
.hero-actions .button-ghost { color: #d7e6f5; }
.hero-actions .button-ghost:hover { background: rgba(255,255,255,.09); }

.hero-versus {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
  align-items: start;
  gap: 12px 8px;
  padding: 0 0 0 24px;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, .16);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.hero-versus .avatar { width: 40px; height: 40px; margin: 0 0 8px; box-shadow: none; font-size: 13px; }
.hero-versus .avatar-jade { color: #fff; background: #217c67; }
.hero-versus .avatar-open { color: #c5d5e7; border: 1px dashed #7795b6; background: transparent; }
.hero-versus .versus-person strong { margin-bottom: 2px; color: #fff; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.hero-versus .versus-person > span:last-child { color: #c5d5e7; font-size: 12px; line-height: 1.5; }
.hero-versus .versus-center { height: 40px; justify-content: center; }
.hero-versus .versus-center b { width: 28px; height: 28px; transform: none; border: 0; background: transparent; color: #a9c7e7; font-size: 11px; letter-spacing: .06em; }
.versus-stake { grid-column: 1 / -1; display: grid; gap: 4px; margin: 0; text-align: center; }
.versus-stake strong { color: #fff; font-size: 13px; }
.versus-stake span { color: #c5d5e7; font-size: 12px; line-height: 1.5; }

.marketplace-section { padding-top: 0; }
.market-main { min-width: 0; }
.marketplace-section .section-heading { min-height: 44px; align-items: center; }
.marketplace-section .section-heading .kicker { display: none; }
.marketplace-section .section-heading h2 { margin: 0; font-size: 22px; }
.marketplace-section .filters { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; margin: 0 0 12px; gap: 8px 16px; }
.marketplace-section .ending-filter { margin: 0; white-space: nowrap; }
.marketplace-section .ending-filter input { margin: 0; }
.marketplace-section .search-box { flex: 1; width: auto; max-width: none; min-width: 200px; margin: 0; min-height: 44px; background: #fff; }
.marketplace-section .search-box .ui-icon { flex: none; width: 16px; height: 16px; color: #5e6b7c; }
.marketplace-section .challenge-list { gap: 12px; }
.section-heading h2,
.page-intro h1 { font-size: 24px; }

.segmented,
.activity-tabs,
.asset-tabs {
  border-radius: 7px;
  background: #edf1f5;
}

.filter-chip,
.activity-tabs button,
.asset-tabs button { border-radius: 5px; }
.search-box { border-radius: 7px; box-shadow: none; }

.challenge-card,
.rail-card,
.form-card,
.preview-card,
.x-origin-card,
.review-card,
.challenge-detail-card,
.accept-card,
.timeline-card,
.terms-panel,
.activity-list article,
.ranking-table,
.profile-panel,
.stats-strip,
.podium-place,
.profile-hero {
  border-radius: 8px;
  box-shadow: none;
}

.challenge-card { padding: var(--market-inset, 16px); }
.challenge-card:hover { transform: none; border-color: #9fb0c2; box-shadow: 0 2px 8px rgba(15, 33, 56, .06); }
.challenge-prediction, .challenge-prediction.compact { padding: 12px 0 8px; }
.challenge-prediction h3 { max-width: none; font-size: 18px; line-height: 1.4; font-weight: 700; letter-spacing: -.015em; }
.quote-mark { display: none; }
.challenge-footer { margin-top: 12px; padding-top: 12px; gap: 12px; }
.challenge-card .price-row { padding-bottom: 0; flex-direction: column; align-items: stretch; gap: 4px; }
.challenge-card .price-row > small { order: -1; color: #52647a; font-size: 12px; }
.market-shell .challenge-card .price-row > .display-quote { flex: none; align-content: start; }
.challenge-card .challenger { min-width: 0; }
.challenge-card .challenger .avatar { color: #fff; border: 0; box-shadow: none; }
.challenge-card .challenger .avatar-jade { background: #217c67; }
.challenge-card .challenger .avatar-orange { background: #9c4b15; }
.challenge-card .challenger .avatar-blue { background: #1f58b0; }
.challenge-card .challenger strong { font-size: 13px; overflow-wrap: anywhere; }
.challenge-card .challenger div > span, .challenge-card .stake-box > span { font-size: 11px; letter-spacing: 0; color: #5e6b7c; }
.challenge-card .stake-box { flex-shrink: 0; }
.market-pick { min-width: 148px; min-height: 44px; }
.market-pick span { font-size: 11px; letter-spacing: 0; }
.market-pick b { font-size: 13px; }
.challenge-accent { display: none; }
.challenge-card .asset-identity strong { font-size: 15px; }
.challenge-card .asset-identity div > span { font-size: 12px; color: #5e6b7c; }
.challenge-card .status-pill { font-size: 10px; }

.market-rail { gap: var(--market-gap, 16px); }
.rail-card { padding: var(--market-inset, 16px); }
.rail-heading { min-height: 24px; margin-bottom: 4px; gap: 8px; }
.rail-heading h2 { font-size: 15px; }
.rail-heading > span { font-size: 9px; letter-spacing: .03em; }
.market-shell .market-rail .ticker-list > div { grid-template-columns: minmax(0, 1fr); gap: 4px; padding-block: 12px; }
.market-rail .ticker-list > div > b { font-size: 13px; }
.market-rail .display-quote > strong { font-size: 17px; }
.market-rail .display-status, .market-rail .display-source { font-size: 12px; }
.market-rail .leaderboard-mini li { gap: 8px; }

.form-card,
.review-card { border-radius: 8px; }
.form-section { padding-block: 24px; }
.step-title > span { border-radius: 6px; }
.choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice-card { min-height: 108px; border-radius: 7px; background: #fff; }
.choice-card.is-selected { background: #f1f5ff; box-shadow: inset 0 0 0 1px #1463ff; }
.choice-icon { border-radius: 6px; }
.choice-icon .ui-icon { width: 17px; height: 17px; }
.choice-card small { max-width: 180px; line-height: 1.35; }

.metric-toggle {
  min-height: 44px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 3px;
  border: 1px solid #ccd8e5;
  border-radius: 7px;
  background: #edf1f5;
}

.metric-toggle button {
  min-height: 36px;
  padding-inline: 14px;
  border-radius: 5px;
  color: #657387;
  background: transparent;
  font-size: 11px;
  font-weight: 750;
}

.metric-toggle button.is-active {
  color: #10233e;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 33, 56, .08);
}

.metric-equivalent {
  display: block;
  margin-top: 7px;
  color: #52647a;
  font-size: 10px;
  line-height: 1.45;
}

.field input,
.field select,
.select-control,
.input-prefix,
.input-suffix,
.quick-stakes button,
.toggle-row,
.market-rule-note,
.open-warning,
.cancel-rule,
.safe-callout { border-radius: 7px; }

.preview-card { border-top: 3px solid #1463ff; }
.preview-label { color: #536174; }

/* PVP-UI-018: terms use the reading column; amounts use the payment summary. */
.detail-grid { gap: 24px; }
.challenge-detail-card .challenge-detail-heading,
.challenge-detail-card .detail-call { padding: var(--pvp-card-gutter); }
.challenge-detail-card .detail-call h1 { margin: 12px 0 20px; font-size: clamp(28px, 3vw, 38px); line-height: 1.2; }
.challenge-detail-card .detail-player b { font-size: 13px; }
.challenge-detail-card .detail-player div > span { font-size: 12px; line-height: 1.5; }
.challenge-detail-card .chart-card,
.challenge-detail-card .rules-box { margin: 0; padding: var(--pvp-card-gutter); border: 0; border-top: 1px solid #e3e9f0; border-radius: 0; background: transparent; }
.challenge-detail-card .chart-card > h2 { margin: 0 0 12px; font-size: 18px; }
.challenge-detail-card .chart-card .display-caption { margin-top: 16px; }
.challenge-detail-card .rules-box h3 { margin-bottom: 16px; font-size: 16px; }
.challenge-detail-card .rules-box li { padding-block: 10px; border-bottom: 1px solid #e3e9f0; }
.challenge-detail-card .rules-box li:last-child { border-bottom: 0; }
.preview-versus, .duel-row { align-items: start; }
.preview-versus > b, .duel-row > span { height: 40px; display: grid; place-items: center; }
.preview-versus small, .duel-row small { font-size: 12px; line-height: 1.5; }
.live-duel { align-items: start; background: #fff; }
.live-vs > b { order: -1; width: 74px; height: 74px; transform: none; border: 0; background: transparent; }
.live-player h2, .live-player p, .live-player > b { overflow-wrap: anywhere; }
.preview-card.sticky-card, .accept-card.sticky-card { position: static; } /* Content height is unbounded; keep one page scrollbar. */

.podium {
  align-items: stretch;
  gap: 10px;
  max-width: none;
  margin: 26px 0 18px;
}

.podium-place,
.podium-place.first {
  min-height: 165px;
  padding: 22px 14px;
  border-color: #d9e1ea;
  background: #fff;
}

.podium-place.first { border-top: 3px solid #1463ff; }
.podium-place .avatar { width: 48px; height: 48px; margin-bottom: 9px; }
.rank-medal { top: 10px; left: 10px; border-radius: 6px; }
.crown { display: none; }

.profile-hero { border-color: #d9e1ea; background: #fff; }
.profile-avatar { box-shadow: none; }
.profile-panel { border-radius: 8px; }
.profile-calls article,
.badge-grid > div { border-radius: 7px; background: #fff; }
.badge-grid > div > span { color: #1463ff; }
.badge-grid .ui-icon { width: 21px; height: 21px; }

.modal { border-radius: 10px; }
.modal-close { border-radius: 6px; }
.wallet-options button,
.asset-results > button { border-radius: 7px; background: #fff; }

.mobile-nav .ui-icon { width: 19px; height: 19px; }

@media (max-width: 1120px) {
  .market-shell { grid-template-columns: minmax(0, 1fr); }
  .market-shell > .market-rail { grid-column: 1; grid-row: auto; }
  .market-main { min-width: 0; }
  .market-rail { display: grid; grid-template-columns: 1fr 1fr; }
  .market-rail > .leaderboard-mini { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .hero-panel { padding: 20px; gap: 20px; }
  .hero-versus { padding-left: 20px; }
  .market-rail { grid-template-columns: 1fr 1fr; }
  body { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
  .mobile-nav {
    min-height: 66px;
    height: auto;
    position: fixed;
    inset: auto 0 0;
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mobile-nav button {
    min-height: 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #5e6b7c;
    background: transparent;
    font-size: 11px;
    font-weight: 700;
  }
  .mobile-nav button.is-active { color: #1463ff; }
  .prototype-banner { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 640px) {
  .prototype-banner {
    min-height: 26px;
    left: 10px;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    padding: 5px 8px;
    font-size: 10px;
  }
  .prototype-banner span:first-child { display: none; }
  .prototype-banner span + span { display: inline; padding-left: 0; border-left: 0; }
  .topbar { height: 58px; padding-inline: 12px; }
  .brand-mark { width: 29px; height: 29px; }
  .wallet-button { min-height: 44px; }
  .market-subnav { height: 43px; }
  .market-subnav > div { width: calc(100% - 24px); }
  .page-shell, .narrow-shell, .detail-shell { padding-top: 16px; }
  .hero-panel { display: grid; grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 12px; border-radius: 8px; }
  .hero-copy h2 { margin: 8px 0 12px; font-size: 22px; }
  .hero-copy > p { display: none; } /* Repeats the visible participant and review action. */
  .hero-versus { margin: 0; padding: 12px 0 0; gap: 8px; border-left: 0; border-top: 1px solid #3e5d7f; }
  .hero-versus .versus-person { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 4px; text-align: left; }
  .hero-versus .avatar { width: 32px; height: 32px; margin: 0; font-size: 11px; align-self: start; }
  .hero-versus .versus-center { height: 32px; }
  .hero-versus .versus-person strong { margin: 0; font-size: 12px; align-self: center; }
  .hero-versus .versus-person > span:last-child { display: none; } /* Conditions remain in title, CTA and exact review. */
  .versus-stake span { font-size: 11px; }
  .market-subnav { height: 44px; }
  .market-subnav > div { width: 100%; gap: 12px; }
  .market-subnav button { font-size: 12px; }
  .marketplace-section .filters { column-gap: 8px; }
  .marketplace-section .ending-filter { font-size: 12px; gap: 6px; }
  .marketplace-section .ending-filter input { width: 16px; height: 16px; }
  .marketplace-section .search-box { width: 100%; min-width: 0; max-width: none; flex: none; }
  .marketplace-section .section-heading h2 { font-size: 21px; }
  .market-shell { grid-template-columns: minmax(0, 1fr); }
  .market-rail { grid-template-columns: minmax(0, 1fr); }
  .market-rail > .leaderboard-mini { grid-column: auto; }
  .challenge-card { padding: 16px; border-radius: 8px; }
  .challenge-prediction h3 { font-size: 17px; }
  .challenge-footer { gap: 12px; }
  .market-pick { flex-direction: row; justify-content: space-between; padding: 12px; }
  .market-pick span, .market-pick b { font-size: 13px; }
  .rail-card { padding: 16px; }
  .search-box { min-height: 46px; }
  .search-box input { min-height: 44px; }
  .chart-range button { min-width: 44px; min-height: 44px; }
  .activity-tabs button { min-height: 44px; }
  .form-card, .review-card { padding-inline: 15px; }
  .choice-card { min-height: 92px; }
  .choice-grid { grid-template-columns: 1fr; }
  .metric-toggle button { min-height: 44px; }
  .preview-card, .accept-card, .live-duel, .profile-hero, .modal { border-radius: 9px; }
  .live-vs > b { width: 53px; height: 53px; }
  .live-vs > span, .live-player p, .live-player > b { font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
  .mobile-nav button span { font-size: inherit; }
}