/* Library > Market Depot (pages/market.php). Usa o visual do library.css (pergaminho, cabecalho escuro);
 * aqui so o que e proprio da pagina: os prints reais do jogo (assets/library/market/*.jpg) com legenda, a tabela
 * dos dois scrolls, a linha do tempo da regra das 6 h, os passos, o exemplo da taxa e o fluxo do lance. */
.mk-section { scroll-margin-top: 10px; }
.mk-section p { margin: 0 0 6px; line-height: 1.5; }
.mk-section h3 { font-size: 13px; margin: 8px 0 4px; color: #3a2a1a; }
.mk-h-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-right: 6px;
  vertical-align: -4px; background: #505050; border: 1px solid #3a2a1a; color: #f4d58d; font-size: 13px; line-height: 1; font-weight: normal; }
.mk-ic-table::before { content: '\2261'; }
.mk-ic-shop::before { content: '\2302'; }
.mk-ic-scroll::before { content: '\00A7'; }
.mk-ic-clock::before { content: '\25F7'; }
.mk-ic-pin::before { content: '\25CE'; }
.mk-ic-hand::before { content: '\25B6'; font-size: 10px; }
.mk-ic-moon::before { content: '\263E'; }
.mk-ic-box::before { content: '\25A3'; }
.mk-ic-eye::before { content: '\25C9'; }
.mk-ic-coin::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: #e8b830; box-shadow: inset -2px -2px 0 #a87a10; }
.mk-ic-bolt::before { content: '\21BB'; }
.mk-ic-list::before { content: '\2630'; font-size: 11px; }
.mk-ic-shield::before { content: '\2713'; }
.mk-ic-lock::before { content: '\2716'; font-size: 11px; }
.mk-ic-help::before { content: '?'; font-weight: bold; }
/* rotulo de botao do client e frase do client */
.mk-ui { display: inline-block; padding: 0 6px; margin: 0 1px; background: #505050; border: 1px solid #2a2a2a; border-radius: 2px;
  color: #f0f0f0; font-size: 11px; line-height: 16px; white-space: nowrap; font-weight: bold; box-shadow: inset 0 1px 0 #6a6a6a; }
.mk-msg { padding: 0 4px; background: #2c2c2c; color: #f0f0f0; font-family: Verdana, Tahoma, sans-serif; font-size: 11px;
  border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; line-height: 1.7; }

/* prints do jogo: no tamanho real (sem ampliar), um embaixo do outro; o clique abre o print inteiro */
.mk-shot { margin: 0; width: 100%; }
.mk-shot a { display: block; }
.mk-shot img { display: block; width: 100%; height: auto; border: 1px solid #1a1a1a; background: #2a2a2a; box-shadow: 2px 2px 0 rgba(0,0,0,.25); }
.mk-shot figcaption { margin-top: 4px; font-size: 11px; color: #5f4d41; line-height: 1.4; }
.mk-shots { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }

/* topo */
.mk-hero .mk-shot { margin-top: 8px; }
.mk-hero-body h2 { font-size: 15px; }
.mk-hero-body p { margin: 0 0 6px; line-height: 1.55; font-size: 12px; }
.mk-inspired { color: #5f4d41; font-style: italic; }

/* perguntas comuns */
.mk-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mk-q { padding: 6px 8px; background: #e4d4b4; border: 1px solid #a08a6a; border-left: 3px solid #5f4d41; }
.mk-q h3 { font-size: 12px !important; margin-top: 2px !important; }
.mk-q p { margin: 0 !important; font-size: 12px; }

/* atalhos */
.mk-jump { align-items: center; }
.mk-jump-label { font-size: 12px; font-weight: bold; color: #5f4d41; margin-right: 2px; }

/* tabela de regras */
.mk-facts th { width: 34%; white-space: normal; vertical-align: top; }
.mk-facts td { line-height: 1.45; padding: 3px 6px; }

/* os dois scrolls */
.mk-cmp { margin: 6px 0 4px; }
.mk-cmp th { white-space: normal; }
.mk-cmp tr:first-child th { text-align: center; }
.mk-cmp tr:not(:first-child) th { width: 24%; background: #6a5a4a; }
.mk-cmp td { width: 38%; padding: 3px 6px; text-align: center; background: #f6ead4; }

/* regra das 6 h: linha do tempo */
.mk-timeline { list-style: none; margin: 4px 0 0; padding: 0; display: flex; gap: 6px; }
.mk-timeline li { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 6px 8px; background: #f0e4cc;
  border: 1px solid #a08a6a; border-top: 4px solid #5f4d41; font-size: 12px; line-height: 1.4; position: relative; }
.mk-timeline li b { font-size: 12px; color: #3a2a1a; }
.mk-tl-ok { border-top-color: #3f6a32 !important; }
.mk-tl-no { border-top-color: #a0302a !important; background: #f3dcd4 !important; }
.mk-tl-wait { border-top-color: #c08a20 !important; }

/* passos e listas */
.mk-steps, .mk-list { margin: 0 0 6px 20px; padding: 0; line-height: 1.5; }
.mk-steps li, .mk-list li { margin: 3px 0; }
.mk-steps { counter-reset: mk; list-style: none; margin-left: 0; }
.mk-steps li { counter-increment: mk; position: relative; padding-left: 28px; }
.mk-steps li::before { content: counter(mk); position: absolute; left: 0; top: 1px; width: 20px; height: 20px; line-height: 20px;
  text-align: center; background: #505050; color: #fff; font-weight: bold; font-size: 11px; border-radius: 50%; }
.mk-checks { list-style: none; margin-left: 0; }
.mk-checks li { position: relative; padding-left: 20px; }
.mk-checks li::before { content: '\2713'; position: absolute; left: 2px; top: 0; color: #3f6a32; font-weight: bold; }
.mk-note { padding: 4px 8px; background: #e4d4b4; border-left: 3px solid #a08a6a; font-size: 12px; }

.mk-row { display: flex; gap: 12px; align-items: center; }
.mk-row-top { align-items: flex-start; }
.mk-row-body { flex: 1; min-width: 0; }

.mk-cols { display: flex; gap: 10px; margin-top: 6px; }
.mk-col { flex: 1; min-width: 0; padding: 6px 8px; background: #e4d4b4; border: 1px solid #a08a6a; }
.mk-col h3 { margin-top: 2px; }
.mk-cols-3 { margin-top: 0; align-items: stretch; }
.mk-cols-3 > .lib-box { flex: 1; min-width: 0; }
.mk-callout { margin-top: 8px; padding: 6px 8px; background: #fff3d6; border: 1px solid #a08a6a; border-left: 3px solid #5f4d41; }

/* visitante */
.mk-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mk-cards-2 { grid-template-columns: repeat(2, 1fr); }
.mk-card { padding: 6px 8px; background: #e4d4b4; border: 1px solid #a08a6a; }
.mk-card h3 { margin-top: 2px; }
.mk-card .mk-list { margin-left: 16px; font-size: 12px; }
.mk-num { display: inline-block; width: 18px; height: 18px; line-height: 18px; margin-right: 6px; text-align: center; background: #505050;
  color: #f4d58d; border-radius: 50%; font-size: 11px; }
.mk-flow-title { margin-top: 10px !important; }
.mk-flow { display: flex; align-items: center; gap: 8px; }
.mk-step { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; background: #f0e4cc; border: 1px solid #a08a6a; font-size: 12px; }
.mk-step span { color: #5f4d41; font-size: 11px; }
.mk-step.mk-ok { border-left: 4px solid #3f6a32; }
.mk-step.mk-back { border-left: 4px solid #a0522d; }
.mk-arrow { flex: 0 0 auto; width: 0; height: 0; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 12px solid #5f4d41; }
.mk-fork { display: flex; flex-direction: column; gap: 6px; flex: 1; }

/* taxa: o exemplo do 1.000 */
.mk-money { width: 300px; flex: 0 0 auto; }
.mk-money td { padding: 3px 6px; }
.mk-minus { color: #8a2a1a; font-weight: bold; }
.mk-plus { color: #2f5a24; font-weight: bold; }
.mk-total td { font-weight: bold; background: #e4d4b4 !important; }

@media (max-width: 860px) {
  .mk-timeline { flex-wrap: wrap; }
  .mk-timeline li { flex: 1 1 45%; }
}
@media (max-width: 700px) {
  .mk-row, .mk-row-top { flex-direction: column; align-items: stretch; }
  .mk-money { width: 100%; }
  .mk-cols, .mk-cols-3 { flex-direction: column; }
  .mk-cards, .mk-cards-2, .mk-faq { grid-template-columns: 1fr; }
  .mk-timeline { flex-direction: column; }
  .mk-flow { flex-direction: column; align-items: stretch; }
  .mk-arrow { align-self: center; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 12px solid #5f4d41; border-bottom: 0; }
  .mk-facts th { width: 40%; }
  .mk-cmp tr:not(:first-child) th { width: 30%; }
}