/* =============================================
   PAREAMENTO.CSS – Estilos do jogo "Jogo da Memória"
   Depende de css/global.css e css/games/_base.css.
   ============================================= */

html, body {
  --game-bg: linear-gradient(135deg, #C94B4B 0%, #4B134F 100%);
  touch-action: manipulation;
  display: flex; flex-direction: column;
}

.game-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 50px 14px 8px; gap: 8px; flex-shrink: 0; z-index: 100;
}

.game-area {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 6px 12px 66px;
  gap: 10px; overflow: hidden;
}

/* GRADE */
.cards-grid { display: grid; gap: 9px; width: 100%; max-width: 580px; }
.cg-2 { grid-template-columns: repeat(2,1fr); }
.cg-3 { grid-template-columns: repeat(3,1fr); }
.cg-4 { grid-template-columns: repeat(4,1fr); }
.cg-5 { grid-template-columns: repeat(5,1fr); }

/* CARTA */
.card { aspect-ratio:1; cursor:pointer; border-radius:16px; perspective:600px; -webkit-tap-highlight-color:transparent; }
.ci   { width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .42s cubic-bezier(.4,0,.2,1);border-radius:16px; }
.card.flipped .ci, .card.matched .ci { transform: rotateY(180deg); }

.cf { position:absolute;inset:0;border-radius:16px;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;-webkit-backface-visibility:hidden; }
.cb { background:linear-gradient(135deg,#7B2FF7,#F107A3);box-shadow:0 4px 14px rgba(0,0,0,.25);border:3px solid rgba(255,255,255,.2);font-size:1.7em; }
.cf2{ background:#fff;transform:rotateY(180deg);box-shadow:0 4px 14px rgba(0,0,0,.18); }

.card.matched .cf2 { background:linear-gradient(135deg,#a5d6a7,#66bb6a); animation:mb .45s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes mb { 0%,100%{transform:rotateY(180deg) scale(1)} 50%{transform:rotateY(180deg) scale(1.1)} }

.card.wrong .ci { animation: ws .4s ease; }
@keyframes ws { 0%,100%{transform:rotateY(180deg) translateX(0)} 25%{transform:rotateY(180deg) translateX(-8px)} 75%{transform:rotateY(180deg) translateX(8px)} }

/* INFO */
.round-info {
  display:flex; align-items:center; gap:14px;
  background:rgba(255,255,255,.12); backdrop-filter:blur(6px);
  border-radius:99px; padding:7px 18px; color:#fff;
  font-weight:800; font-size:.9rem; flex-wrap:wrap; justify-content:center;
}

/* BARRA INFERIOR (override) */
.bottom-bar { background:rgba(0,0,0,.22); }