/* ---- Capinha, the game: after the capinhas' history, your turn. The panel is the game's emblem,
   set tile by tile like every other panel on the page; the heading is the game's own plaque. ---- */
.jogo { display: grid; grid-template-columns: 5fr 7fr; align-items: center; background: var(--wall); }
.jogo-painel { display: block; margin: clamp(48px, 6vw, 96px) 0 clamp(48px, 6vw, 96px) var(--m); justify-self: end; width: min(100%, 560px); }
.jogo-painel .assemble { margin: 0; box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 18px 40px -22px rgba(14, 34, 80, .45); }
.jogo-painel:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 6px; }
.jogo-txt { padding: clamp(56px, 7vw, 112px) var(--m) clamp(56px, 7vw, 112px) clamp(32px, 5vw, 80px); display: grid; gap: 26px; align-content: center; justify-items: start; }
.jogo-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: var(--t-body); line-height: 1.5; }
.jogo-lista li { display: flex; gap: 14px; align-items: baseline; max-width: 46ch; }
/* a calçada almond in cobalt for each point */
.jogo-lista li::before { content: ""; flex: none; width: 9px; height: 9px; background: var(--cobalt); transform: translateY(-2px) rotate(45deg); border-radius: 1px; }
.jogo-act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.jogo-nota { margin: 0; font-size: var(--t-small); font-style: italic; color: var(--muted); }
/* the maker's line: quiet, as on the game's own screens */
.jogo-autor { margin: 6px 0 0; display: inline-flex; align-items: center; gap: .45em; font-size: var(--t-small); font-style: italic; color: var(--muted); }
.jogo-autor::before, .jogo-autor::after { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .4; }
.jogo-autor .por-alloic { color: var(--ink); }
.jogo-autor .alloic { height: 1em; }

@media (max-width: 1080px) {
  .jogo { grid-template-columns: 1fr; }
  .jogo-painel { justify-self: center; margin: 56px var(--m) 0; width: min(100% - 2 * var(--m), 520px); }
  .jogo-txt { padding: 40px var(--m) 72px; }
}
@media (max-width: 760px) {
  .jogo-painel { margin-top: 44px; }
  .jogo-txt { padding: 32px var(--m) 64px; gap: 22px; }
  .jogo-act .btn { width: 100%; }
}