/* Marketplace uses the same palette, cards and touch targets as the game menu. */
.page { max-width: 2040px; margin: auto; padding: 0 48px 48px; }
.titles { flex: 1; min-width: 0; }
.titles h1 { font-size: 19px; font-weight: 750; }
.sub { color: var(--muted); font-size: 12px; margin-top: 3px; }
.nav-link { display: inline-flex; gap: 9px; align-items: center; min-height: 48px; padding: 0 18px; border: 1px solid var(--border); border-radius: 12px; color: var(--muted); text-decoration: none; font-size: 14px; }
.nav-link:hover { background: var(--surface); color: var(--text); }
.market-intro { display: flex; justify-content: space-between; align-items: end; gap: 20px; padding: 22px 0 18px; }
.market-intro h2 { font-size: clamp(28px, 2.3vw, 38px); font-weight: 750; letter-spacing: -.035em; }
.market-intro p { color: var(--muted); font-size: 14px; margin-top: 6px; line-height: 1.5; }
.connection-note { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; white-space: nowrap; padding-bottom: 4px; }
.connection-note::before { content: ''; width: 7px; height: 7px; background: #9ac8b3; border-radius: 50%; }
.connection-note.is-offline::before { background: var(--gold); }
.overview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }
.overview-item { text-align: left; display: flex; align-items: center; gap: 16px; padding: 13px 20px; border: 1px solid var(--border); border-radius: 16px; background: #ffffff04; color: var(--text); }
.overview-item:hover { border-color: #829d8e; background: #ffffff08; }
.overview-icon { display: grid; place-items: center; height: 44px; width: 44px; flex-shrink: 0; border-radius: 12px; background: #a5c9b315; color: #b9d7c2; font-size: 19px; }
.overview-item:last-child .overview-icon { background: #ebc88814; color: var(--gold); }
.overview-copy { display: flex; flex-direction: column; gap: 4px; }
.overview-copy strong { font-size: 23px; font-variant-numeric: tabular-nums; }
.overview-copy span { color: var(--muted); font-size: 13px; }
.overview-arrow { margin-left: auto; font-size: 12px; color: var(--muted); }
.shared-panel { display: flex; align-items: center; gap: 18px; padding: 16px 22px; margin-bottom: 20px; background: #ffffff04; border: 1px solid var(--border); border-radius: 16px; }
.system-icon { display: grid; place-items: center; width: 48px; height: 48px; flex-shrink: 0; background: #a5c9b315; color: #b9d7c2; border-radius: 13px; font-size: 21px; }
.system-copy { flex: 1; min-width: 0; }
.system-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 5px; }
.system-heading h3 { font-size: 17px; font-weight: 700; }
.system-copy p { color: var(--muted); font-size: 13px; line-height: 1.5; }
.system-message { margin-top: 5px; color: var(--gold) !important; overflow-wrap: anywhere; }
.system-version { font-size: 12px; color: var(--muted); margin-top: 4px; }
.shared-panel.has-update { background: #ebc88808; border-color: #ebc88865; }
.shared-panel.has-error { border-color: #ca8a7a; }
.shared-panel .update-btn { min-width: 185px; min-height: 50px; background: var(--gold); color: var(--bg); border-color: var(--gold); font-weight: 750; }
.system-badge, .availability { display: inline-flex; align-items: center; gap: 6px; border-radius: 7px; padding: 6px 9px; font-size: 11px; font-weight: 650; }
.system-badge { background: #a5c9b315; color: #c4e2cf; }
.has-update .system-badge { background: #ebc88818; color: var(--gold); }
.has-error .system-badge { background: #ca8a7a22; color: #ffb4aa; }
.market-toolbar { position: relative; z-index: 10; margin-bottom: 20px; }
.market-search-row { display: flex; gap: 12px; margin-bottom: 12px; }
.search-shell { position: relative; display: flex; gap: 8px; flex: 1; min-width: 0; }
.search-field { flex: 1; }
.market-select { color: var(--text); background: #1c3234; border: 1px solid var(--border); border-radius: 12px; min-height: 52px; padding: 0 14px; font: inherit; font-size: 14px; max-width: 230px; }
.filter-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.filters { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 5px; scrollbar-width: thin; min-width: 0; }
.filter-chip { min-height: 46px; padding: 0 16px; white-space: nowrap; border: 1px solid transparent; border-radius: 12px; color: var(--muted); background: transparent; font-size: 14px; }
.filter-chip.is-active { color: var(--text); border-color: #5d7770; background: #334d49; }
.filter-chip:hover { background: #ffffff08; }
.filter-count { margin-left: 7px; opacity: .7; font-size: 12px; }
.result-count { font-size: 12px; color: var(--muted); white-space: nowrap; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.game-card { cursor: default; }
.game-card:hover { transform: none; }
.game-card:active { transform: none; }
.card-preview { aspect-ratio: 2.6; }
.availability { position: absolute; left: 14px; top: 14px; z-index: 2; background: #102426ed; border: 1px solid #ffffff28; color: #d7e6da; }
.availability[data-kind="update_available"], .availability[data-kind="new"] { color: var(--gold); }
.availability[data-kind="error"], .availability[data-kind="local_only"] { color: #ffc1ad; }
.card-top { align-items: start; }
.card-name { font-size: clamp(21px, 1.5vw, 28px); }
.card-category { color: var(--muted); font-size: 12px; margin-top: 7px; line-height: 1.5; }
.card-meta { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.card-desc { min-height: 45px; }
.card-version { display: flex; flex-wrap: wrap; gap: 6px; color: #9fb7b0; font-size: 11px; line-height: 1.5; }
.card-version .version-current { color: #d7dfd3; }
.card-actions { display: flex; align-items: start; min-width: 0; gap: 8px; margin-top: auto; padding-top: 8px; }
.card-play, .card-actions > .update-btn { flex: 1; min-width: 0; min-height: 50px; font-size: 14px; font-weight: 700; }
.card-play { background: #a5c9b31c; color: #d7e6da; border: 1px solid #6d8a794a; }
.card-play:hover { background: #a5c9b32a; }
.card-play.is-disabled { display: none; }
.card-actions > [data-game-update] { background: var(--gold); border-color: var(--gold); color: var(--bg); }
.card-options { position: relative; flex-shrink: 0; }
.card-options > summary { list-style: none; display: grid; place-items: center; width: 48px; height: 50px; border: 1px solid var(--border); border-radius: 12px; color: var(--muted); cursor: pointer; }
.card-options > summary::-webkit-details-marker { display: none; }
.card-options[open] > summary { background: #ffffff14; }
.card-options .update-btn { margin-top: 8px; min-height: 46px; width: 100%; }
.card-options[open] { flex-basis: 96px; }
.card-update-status { margin-top: 2px; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.card-update-status[data-status="new"], .card-update-status[data-status="update_available"], .card-update-status[data-status="local_only"] { display: none; }
.game-card.is-locked { opacity: 1; border-color: #ebc88865; }
.game-card.is-locked .availability { color: var(--gold); }
.empty { grid-column: 1 / -1; padding: 65px 20px; border: 1px dashed var(--border); border-radius: 20px; }
.touch-keyboard { top: calc(100% + 8px); }
body[data-marketplace-readonly="true"] .overview, body[data-marketplace-readonly="true"] .filters { display: none; }
body[data-marketplace-readonly="true"] .filter-row { justify-content: end; }
@media (min-width: 2100px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .page { padding: 0 24px 32px; } .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .card-body { padding: 18px; } .overview-item { padding: 14px; gap: 12px; } }
@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .connection-note { display: none; } .market-select { max-width: 190px; } }
@media (max-width: 600px) {
  .page { padding: 0 18px 28px; }
  .sub { display: none; }
  .nav-link { font-size: 12px; padding: 0 12px; }
  .market-intro { padding: 24px 0 20px; }
  .market-intro p { font-size: 14px; }
  .overview { gap: 8px; }
  .overview-item { flex-direction: column; align-items: start; padding: 13px 10px; gap: 10px; }
  .overview-icon, .overview-arrow { display: none; }
  .overview-copy span { font-size: 11px; }
  .shared-panel { flex-wrap: wrap; padding: 16px; gap: 12px; }
  .shared-panel > .update-btn { flex-basis: 100%; }
  .system-heading { gap: 6px; }
  .system-heading h3 { font-size: 16px; }
  .system-icon { width: 40px; height: 40px; }
  .market-search-row { flex-wrap: wrap; }
  .search-shell { flex-basis: 100%; }
  .market-select { flex: 1; min-width: 0; max-width: none; }
  .result-count { display: none; }
  .grid { grid-template-columns: 1fr; }
}