/* Calmera Wiki — página do Calmera Pass */

.pass h2 { scroll-margin-top: calc(var(--topbar-h) + 16px); }
.pass h2:first-of-type { margin-top: 28px; }
.pass .is-free { color: var(--green); }
.pass .is-gold { color: var(--gold); }

.pass-hero {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 22px 24px;
  margin-bottom: 14px;
  border: 1px solid rgba(245, 197, 24, 0.22);
  border-radius: 14px;
  background:
    radial-gradient(ellipse at 85% 50%, rgba(245, 197, 24, 0.12), transparent 60%),
    var(--panel);
  scroll-margin-top: calc(var(--topbar-h) + 16px);
}
.pass-hero__text { flex: 1; min-width: 0; }
.pass-hero__text p { margin: 8px 0 0; }
.pass-hero__art { flex-shrink: 0; width: 120px; height: 120px; display: grid; place-items: center; }
.pass-hero__art img { width: 112px; height: 112px; image-rendering: pixelated; object-fit: contain; }

.pass-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
  background: var(--bg-soft);
  color: var(--muted);
}
.pass-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pass-status--live { color: var(--green); background: rgba(52, 211, 153, 0.1); }
.pass-status--soon { color: var(--gold); background: var(--gold-soft); }

.pass-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.pass-fact { display: flex; flex-direction: column; padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); }
.pass-fact span { font-size: 0.68rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--dim); }
.pass-fact strong { font-size: 0.95rem; }
.pass-fact small { font-size: 0.76rem; color: var(--muted); }
.pass-fact--free { border-color: rgba(52, 211, 153, 0.25); }
.pass-fact--free strong { color: var(--green); }
.pass-fact--premium { border-color: rgba(245, 197, 24, 0.25); }
.pass-fact--premium strong { color: var(--gold); }

.pass-npc { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; align-items: center; margin-bottom: 8px; }
.pass-npc__scene {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: 8px;
  padding: 16px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background:
    linear-gradient(transparent 60%, rgba(255, 255, 255, 0.03)),
    var(--bg-soft);
}
.pass-npc__spot { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.pass-npc__spot img { image-rendering: pixelated; }
.pass-npc__spot strong { font-size: 0.8rem; }
.pass-npc__spot code { font-size: 0.7rem !important; white-space: nowrap; }
.pass-npc__spot--free strong { color: var(--green); }
.pass-npc__spot--premium strong { color: var(--gold); }
.pass-npc__info p { margin-bottom: 8px; }

.pass-quote {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-left: 3px solid var(--gold);
  border-radius: 0 8px 8px 0;
  background: var(--panel);
  color: var(--text-soft);
  font-style: italic;
}
.pass-quote strong { font-style: normal; }
.pass-keywords { white-space: nowrap; }
.pass-keywords code { margin-right: 2px; }

.pass-tracks { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 10px; margin-bottom: 12px; }
.pass-track { padding: 16px 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
.pass-track h3 { font-size: 1rem; margin: 8px 0 6px; }
.pass-track h4 { font-size: 0.88rem; margin: 14px 0 6px; color: var(--text); }
.pass-track p, .pass-track ul { font-size: 0.87rem; }
.pass-track--free { border-color: rgba(52, 211, 153, 0.25); }
.pass-track--premium { border-color: rgba(245, 197, 24, 0.28); }

.pass-steps { list-style: none; padding: 0 !important; counter-reset: step; margin-bottom: 12px; }
.pass-steps li { position: relative; padding-left: 34px; margin-bottom: 8px; font-size: 0.87rem; color: var(--text-soft); counter-increment: step; }
.pass-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -1px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gold);
  background: var(--gold-soft);
  border: 1px solid rgba(245, 197, 24, 0.35);
}
.pass-steps--big li { font-size: 0.92rem; padding: 10px 14px 10px 50px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); }
.pass-steps--big li::before { left: 14px; top: 9px; width: 24px; height: 24px; }

.pass-rules li::marker { color: var(--gold); }

.pass-table td { vertical-align: top; }
.pass-table tr.is-exclusive td { background: rgba(245, 197, 24, 0.04); }
.pass-level {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.8rem;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--muted);
}
.pass-level.is-released { color: var(--gold); border-color: rgba(245, 197, 24, 0.4); background: var(--gold-soft); }
.pass-mission { min-width: 200px; }
.pass-mission strong { display: block; margin-bottom: 4px; }
.pass-mission .tag { margin-right: 6px; }
.pass-more, .pass-creatures summary { font-size: 0.76rem; color: var(--gold); cursor: pointer; }
.pass-more:hover, .pass-creatures summary:hover { text-decoration: underline; }
.pass-creatures { display: inline; }
.pass-creatures summary { display: inline; list-style: none; }
.pass-creatures summary::-webkit-details-marker { display: none; }
.pass-creatures__list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.pass-creature {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 2px;
  font-size: 0.74rem;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg-soft);
  color: var(--muted);
}
.pass-creature img { width: 28px; height: 28px; image-rendering: pixelated; object-fit: contain; }
a.pass-creature:hover { color: var(--gold); border-color: rgba(245, 197, 24, 0.4); }
span.pass-creature { padding-left: 8px; }
.pass-reward { font-size: 0.82rem; min-width: 150px; }
.pass-reward--free { color: var(--green); }
.pass-reward--premium { color: var(--gold); }

.reward-card small { font-size: 0.74rem; }

.pass-boxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 8px; }
.pass-box { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); }
.pass-box strong { display: block; font-size: 0.88rem; margin-bottom: 4px; color: var(--gold); }
.pass-box p { font-size: 0.85rem; margin: 0 !important; }

@media (max-width: 860px) {
  .pass-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pass-npc, .pass-tracks, .pass-boxes { grid-template-columns: 1fr; }
  .pass-hero__art { display: none; }
}

.pass-reward { vertical-align: middle; }
.pass-items { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 5px; }
.pass-item {
  position: relative;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  border: 1px solid var(--border-soft);
  background: var(--bg-soft);
  transition: border-color 0.15s;
}
a.pass-item:hover { border-color: currentColor; }
.pass-item img { width: 32px; height: 32px; image-rendering: pixelated; }
.pass-item img[width="24"] { width: 24px; height: 24px; }
.pass-item__qty {
  position: absolute;
  right: 1px;
  bottom: 0;
  font-size: 0.66rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 0 2px #000, 0 0 2px #000, 1px 1px 0 #000;
}
.pass-reward__label { display: block; line-height: 1.35; }