/* Memória da Conexão — cor da área: #8e5cf7 */
.mem { --area: #8e5cf7; --area-d: #6d3fd6; max-width: 760px; }
.mem__inicio { display: grid; gap: 14px; justify-items: center; }
.mem__guia { justify-content: center; }
.mem__passos { margin: 0; padding-left: 1.3em; text-align: left; font-size: 17px; font-weight: 700; display: grid; gap: 6px; }
.mem__dica { margin: 0; font-size: 15px; color: var(--ink-soft); font-weight: 700; }
.mem__h2 { margin: 0; font-size: clamp(22px, 5vw, 30px); line-height: 1.1; color: var(--navy); }
.mem__texto { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.4; }

/* Dificuldade */
.mem__dif { border: 0; padding: 0; margin: 0; width: 100%; }
.mem__dif legend { width: 100%; padding: 0; margin-bottom: 8px; font-weight: 900; font-size: 18px; }
.mem__difopts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mem__opt { position: relative; }
.mem__opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.mem__opt label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 84px; padding: 8px 6px; border: 3px solid var(--navy); border-radius: 14px; background: #fff; text-align: center; font-weight: 900; font-size: 17px; line-height: 1.15; }
.mem__opt label small { font-size: 14px; font-weight: 700; color: var(--ink-soft); }
.mem__opt label .mem__melhor { font-size: 13px; color: var(--area-d); }
.mem__opt input:checked + label { background: var(--area); color: #fff; box-shadow: 0 4px 0 var(--navy); }
.mem__opt input:checked + label small, .mem__opt input:checked + label .mem__melhor { color: #fff; }
.mem__opt input:focus-visible + label { outline: 4px solid var(--blue); outline-offset: 3px; }

/* Partida */
.mem__jogo { display: grid; gap: 12px; justify-items: center; }
.mem__topo { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; }
.mem__stat { margin: 0; padding: 6px 16px; background: #fff; border: 3px solid var(--navy); border-radius: 14px; font-weight: 800; font-size: 17px; }
.mem__stat b { font-size: 22px; font-variant-numeric: tabular-nums; color: var(--area-d); }
.mem__acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

.mem__grade { --cols: 3; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 10px; width: 100%; max-width: calc(var(--cols) * 150px); margin: 0 auto; }
.mem__grade[data-dif="medio"] { --cols: 3; }
.mem__grade[data-dif="dificil"] { --cols: 4; }
@media (min-width: 600px) {
  .mem__grade[data-dif="medio"] { --cols: 4; }
  .mem__grade { gap: 14px; }
}
.mem__aviso { margin: 0; min-height: 1.6em; font-weight: 800; font-size: 17px; color: var(--navy); text-align: center; }

/* Carta */
.carta { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; min-width: 64px; min-height: 64px; padding: 0; border: 0; background: none; perspective: 700px; border-radius: 16px; }
.carta__in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .4s ease; }
.carta.virada .carta__in { transform: rotateY(180deg); }
.sem-anim .carta__in { transition: none; }
.carta__verso, .carta__frente { position: absolute; inset: 0; display: grid; place-items: center; border: 3px solid var(--navy); border-radius: 16px; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 4px 0 var(--navy); }
.carta__verso { background: var(--blue); }
.carta__verso svg { width: 78%; height: 78%; }
.carta__frente { background: #fff; transform: rotateY(180deg); }
.carta__frente svg, .carta__frente img { width: 80%; height: 80%; object-fit: contain; }
.carta:hover:not(.virada) .carta__verso { background: #1a6af0; }
.carta.par .carta__frente { background: #eafbea; border-color: var(--ok); box-shadow: 0 4px 0 var(--ok); }
.carta:focus-visible { outline: 4px solid var(--yellow); outline-offset: 2px; box-shadow: 0 0 0 7px var(--navy); }
.carta[disabled] { cursor: default; }

/* Janelas */
.mem__overlay { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(11, 43, 88, .6); overflow-y: auto; }
.mem__dialog { width: min(100%, 440px); display: grid; gap: 12px; justify-items: center; }
.mem__dialog .mem__passos { font-size: 16px; }
.mem__icone { width: 92px; height: 92px; display: grid; place-items: center; background: #fff; border: 3px solid var(--navy); border-radius: 18px; }
.mem__icone svg, .mem__icone img { width: 80%; height: 80%; object-fit: contain; }
.mem__vitimg { width: 84px; height: 84px; object-fit: contain; }
.mem__botoes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.mem__dialog .m-stars { font-size: 40px; }

/* respiro no topo das telas iniciais */
.seg { padding-top: clamp(18px, 7vh, 72px); }
.mem { padding-top: clamp(18px, 7vh, 72px); }