/* ShopTHEO Jogos — tokens e base (docs/jogos/guia-visual.md). Escopo .stj para não vazar no tema. */
.stj {
  --stj-orange: #e24d00;
  --stj-orange-dark: #b83a00;
  --stj-orange-soft: #ffb36f;
  --stj-cream: #fff6ea;
  --stj-cream-2: #fde7cc;
  --stj-ink: #15171a;
  --stj-muted: #69717c;
  --stj-line: #efd9bd;
  --stj-ok: #1f9d55;
  --stj-miss: #c62828;
  --stj-radius: 16px;
  --stj-shadow: 0 6px 20px rgba(184, 58, 0, .12);
  --stj-ease: cubic-bezier(.2, .8, .2, 1);

  color: var(--stj-ink);
  background: var(--stj-cream);
  -webkit-tap-highlight-color: transparent;
}
.stj *, .stj *::before, .stj *::after { box-sizing: border-box; }
.stj :focus-visible { outline: 3px solid var(--stj-orange); outline-offset: 2px; }

.stj-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 44px; padding: 0 1.25em; border: 0; border-radius: 999px;
  font: inherit; font-weight: 700; cursor: pointer;
  background: var(--stj-orange-dark); color: #fff; box-shadow: var(--stj-shadow);
  transition: transform .15s var(--stj-ease), background .15s;
}
.stj-btn:hover { background: #943000; }
.stj-btn:active { transform: scale(.96); }
.stj-btn[disabled] { opacity: .5; cursor: not-allowed; }
.stj-btn--ghost { background: transparent; color: var(--stj-orange-dark); box-shadow: inset 0 0 0 2px var(--stj-orange); }
.stj-btn--ghost:hover { background: var(--stj-cream-2); }

.stj-card { background: #fff; border: 1px solid var(--stj-line); border-radius: var(--stj-radius); box-shadow: var(--stj-shadow); }
.stj-coins { font-variant-numeric: tabular-nums; font-weight: 800; }
.stj-muted { color: var(--stj-muted); }
/* 0.2.0: botão "Jogar" grande da tela de início e etiqueta do nível durante a partida (caça, memória, forca). */
.stj-go { min-height: 52px; padding: 0 2.6em; font-size: 1.1rem; }
.stj-lvl-tag { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: var(--stj-ink); color: #fff; font-size: .75rem; font-weight: 800; letter-spacing: .03em; white-space: nowrap; }
.stj-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .stj *, .stj *::before, .stj *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}