/* Fase 136: a loja de criações (shop.js). Ainda "Luz de vela": cada criação é uma carta de
   ofício com o preço num selo-moeda de cera dourada no canto; o orçamento são os selos da Fase
   135; a publicação é um juramento assinado numa linha de pena. A denúncia usa a brasa. */

.cr-hero {
  display: flex; flex-direction: column; gap: 8px; padding: 16px;
  border-radius: var(--r-l); border: 1px solid var(--line);
  background: radial-gradient(110% 80% at 0% 0%, var(--gold-soft), transparent 60%),
    radial-gradient(90% 90% at 100% 100%, var(--arcane-soft), transparent 60%), var(--surface);
}
.cr-hero h2 { font-family: var(--f-titulo); font-size: 21px; margin: 0; letter-spacing: 0.03em; }
.cr-hero > p:not(.eyebrow) { font-family: var(--f-prosa); font-size: 16px; line-height: 1.35; color: var(--text-2); }
.cr-hero-links { display: flex; flex-direction: row; gap: 8px; flex-wrap: wrap; }
.cr-hero-links .btn { width: auto; flex: 0 0 auto; }
.cr-hero-links svg { width: 16px; height: 16px; }

.cr-filters { display: flex; flex-direction: column; gap: 8px; }
.cr-sort { overflow-x: auto; scrollbar-width: none; }
.cr-sort button { white-space: nowrap; }

.cr-list { display: flex; flex-direction: column; gap: 14px; }
.cr-empty {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px;
  border: 1.5px dashed var(--line); border-radius: var(--r-m); color: var(--text-2);
}

/* --- a carta --- */
.cr-card {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 14px;
  border-radius: var(--r-m); border: 1px solid var(--line); color: var(--text); text-decoration: none;
  background: linear-gradient(180deg, var(--surface), var(--surface-2)); box-shadow: var(--shadow-1);
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease);
}
.cr-card::before {
  content: ""; position: absolute; inset: 5px; border-radius: calc(var(--r-m) - 4px);
  border: 1px solid var(--line-soft); pointer-events: none;
}
a.cr-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
a.cr-card:focus-visible { outline: 3px solid var(--gold-lo); outline-offset: 2px; }
.cr-card-top { display: flex; align-items: flex-start; gap: 12px; }
.cr-class { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
.cr-name { margin: 2px 0 0; font-family: var(--f-titulo); font-size: 19px; line-height: 1.2; letter-spacing: 0.02em; overflow-wrap: anywhere; }

/* o selo-moeda */
.cr-price {
  flex: none; display: grid; place-items: center; align-content: center; width: 62px; height: 62px;
  border-radius: 50%; color: var(--on-gold); text-align: center; rotate: -6deg;
  background: radial-gradient(circle at 34% 28%, var(--gold-hi), var(--gold-lo) 62%, color-mix(in srgb, var(--gold-lo) 70%, black) 100%);
  box-shadow: inset 0 0 0 3px rgb(255 255 255 / 0.18), inset 0 0 0 5px rgb(0 0 0 / 0.12),
    inset 0 -4px 6px rgb(0 0 0 / 0.18), 0 2px 6px rgb(80 55 20 / 0.3);
}
.cr-price b { font: 700 17px/1 var(--f-titulo); font-variant-numeric: tabular-nums; }
.cr-price small { font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.8; }
.cr-price.big { width: 78px; height: 78px; }
.cr-price.big b { font-size: 21px; }

.cr-author { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-2); }
.cr-author strong { color: var(--text); }
.cr-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 13px; color: var(--text-2); }
.cr-stars { display: inline-flex; align-items: center; gap: 6px; }
.cr-stars.none { font-style: italic; }
.cr-stars-row i { font-style: normal; color: var(--line); letter-spacing: 1px; }
.cr-stars-row i.on { color: var(--gold-lo); }
.cr-stars small { font-variant-numeric: tabular-nums; }

.cr-levels { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding-top: 8px; border-top: 1px dashed var(--line); }
.cr-level-tag {
  margin: 2px 0 0; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; color: var(--arcane); background: var(--arcane-soft); border: 1px solid var(--arcane-line); white-space: nowrap;
}
.cr-lines { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 4px; font-family: var(--f-prosa); font-size: 16px; line-height: 1.3; }
.cr-desc { font-family: var(--f-prosa); font-size: 18px; line-height: 1.45; font-style: italic; color: var(--text-2); margin: 0; }

.cr-owned { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 14px; border-radius: var(--r-m); color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); font-weight: 600; }
.cr-owned svg { width: 18px; height: 18px; }
.cr-owned.gone, .cr-notice.gone { color: var(--text-2); background: var(--surface-2); }
.cr-notice { margin: 0; padding: 12px 14px; border-radius: var(--r-m); color: var(--ember); background: var(--ember-soft); font-weight: 600; font-size: 14px; }

/* --- avaliações --- */
.cr-review { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: var(--r-m); border: 1px solid var(--line-soft); background: var(--surface); }
.cr-review-top { display: flex; align-items: center; gap: 10px; }
.cr-review p { font-family: var(--f-prosa); font-size: 16px; line-height: 1.35; }
.cr-report-review { align-self: flex-start; font-size: 12px; color: var(--text-2); background: none; border: 0; padding: 4px 0; text-decoration: underline; cursor: pointer; }
.cr-report-review:disabled { text-decoration: none; cursor: default; }
.cr-review-form { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--gold-soft); }
.cr-review-form .btn { align-self: flex-start; }
.cr-star-pick { display: flex; gap: 2px; }
.cr-star-pick button {
  width: 40px; height: 40px; font-size: 26px; line-height: 1; background: none; border: 0; cursor: pointer; color: var(--line);
  border-radius: 50%;
}
.cr-star-pick button.on { color: var(--gold-lo); }
.cr-star-pick button:focus-visible { outline: 2px solid var(--gold-lo); }

.cr-foot { justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.cr-report, .cr-report-go { color: var(--ember); }
.cr-report-go:not(:disabled) { border-color: var(--ember); background: var(--ember-soft); }

/* --- folhas --- */
.cr-sheet { gap: 12px; }
.cr-sheet-name { margin: 0; font-family: var(--f-titulo); font-size: 18px; }
.cr-sheet-name small { font-family: var(--f-ui); font-size: 13px; color: var(--text-2); }
.cr-reasons { display: flex; flex-direction: column; gap: 6px; }
.cr-reason { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: var(--r-s); border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.cr-reason:has(input:checked) { border-color: var(--ember); background: var(--ember-soft); }
.cr-reason input { accent-color: var(--ember); width: 18px; height: 18px; }

.cr-price-row { display: flex; align-items: center; gap: 10px; }
.cr-price-input { max-width: 130px; font: 700 22px/1 var(--f-titulo); font-variant-numeric: tabular-nums; }
.cr-range { width: 100%; accent-color: var(--gold-lo); }
.cr-gets { font-size: 14px; color: var(--text-2); }
.cr-gets.bad { color: var(--ember); }

/* o juramento de autoria: a caixa e a assinatura numa linha de pena */
.cr-oath { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--surface); }
.cr-oath-check { display: flex; gap: 10px; align-items: flex-start; font-family: var(--f-prosa); font-size: 17px; line-height: 1.35; cursor: pointer; }
.cr-oath-check input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--gold-lo); }
.cr-oath-sign {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 2px 4px;
  border-bottom: 1.5px solid var(--text-2); opacity: 0.35; transition: opacity 200ms var(--ease);
}
.cr-oath-sign span { font-family: var(--f-prosa); font-style: italic; font-size: 22px; }
.cr-oath-sign small { font-size: 12px; color: var(--text-2); }
.cr-oath:has(input:checked) .cr-oath-sign { opacity: 1; }
.cr-oath:has(input:checked) { border-color: var(--gold-lo); }

/* --- regras e fila --- */
.cr-rules { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: var(--r-l); border: 1px solid var(--line); background: var(--surface); }
.cr-rules ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; font-family: var(--f-prosa); font-size: 17px; line-height: 1.4; }
.cr-queue-item { display: flex; flex-direction: column; gap: 8px; padding-bottom: 14px; border-bottom: 1px dashed var(--line); }
.cr-reports { margin: 0; padding-left: 18px; font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.cr-reports small { color: var(--text-2); }
.cr-decide { gap: 8px; }
.cr-remove { color: var(--ember); border-color: var(--ember); }

/* status da criação no construtor */
.sub-listing { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--surface); }
.sub-listing small { display: block; color: var(--text-2); }
.sub-listing.em_revisao { border-color: var(--ember); background: var(--ember-soft); }

.sub-status.shop.ativa { color: var(--gold); background: var(--gold-soft); border-color: var(--line); }
.sub-status.shop.em_revisao { color: var(--ember); background: var(--ember-soft); border-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  .cr-card, .cr-oath-sign { transition: none; }
  a.cr-card:hover { transform: none; }
}