/* ============================================================
   Memória — tema sunset.
   ============================================================ */

.sj-game-host:has(.mem) {
  --sj-text:           #2d2438;
  --sj-text-dim:       #5d5468;
  --sj-text-mute:      rgba(45, 36, 56, 0.42);
  --sj-bg-card:        rgba(255, 255, 255, 0.85);
  --sj-bg-elev:        rgba(255, 255, 255, 0.7);
  --sj-bg-card-hover:  rgba(255, 255, 255, 0.95);
  --sj-border:         rgba(255, 255, 255, 0.5);
  --sj-border-bright:  rgba(45, 36, 56, 0.18);
  --sj-accent:         #6b5bff;
  --sj-accent-hover:   #5347d6;
  --sj-accent-soft:    rgba(107, 91, 255, 0.12);
  --sj-gold:           #ffd93d;
  --sj-danger:         #ff3355;
  --sj-score-bg:       #fff;
}
.sj-game-host:has(.mem),
body:has(.sj-game-stage) .sj-game-host:has(.mem) {
  background:
    radial-gradient(circle at 15% 25%, rgba(255,255,255,0.18), transparent 35%),
    radial-gradient(circle at 85% 80%, rgba(107,91,255,0.20), transparent 40%),
    linear-gradient(135deg, #ff7e5f 0%, #feb47b 45%, #ff6b95 100%);
}
.sj-game-stage-frame:has(.mem) {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.25);
}

/* ============ Wrapper ============ */
.mem {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 14px;
  height: 100%;
  box-sizing: border-box;
}

/* ============ Tabuleiro ============ */
.mem-board-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.mem-board-wrap[hidden] { display: none; }

.mem-board {
  /* grid-template-columns e --mem-card-size definidos via JS via best-fit */
  display: grid;
  gap: var(--mem-gap, 8px);
  justify-content: center;
  align-content: center;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
}

.mem-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sj-font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #2d2438;
}
.mem-meta-pill {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s;
}
.mem-meta-pill:hover { background: rgba(255, 255, 255, 0.95); }

/* ============ Cartas ============ */
.mem-card {
  width: var(--mem-card-size, 80px);
  height: var(--mem-card-size, 80px);
  background: transparent;
  border: 0;
  padding: 0;
  perspective: 600px;
  cursor: pointer;
  position: relative;
}
.mem-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.4, .15, .25, 1.15);
}
.mem-card.is-flipped .mem-card-inner,
.mem-card.is-matched .mem-card-inner { transform: rotateY(180deg); }

.mem-card-back,
.mem-card-front {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: grid;
  place-items: center;
  box-shadow:
    inset 0 0 0 1.5px rgba(45, 36, 56, 0.10),
    0 3px 10px rgba(45, 36, 56, 0.10);
  overflow: hidden;
}
.mem-card-back {
  background: linear-gradient(135deg, #6b5bff 0%, #4338ca 100%);
  color: #fff;
}
.mem-card-back::after {
  content: '?';
  font-family: var(--sj-font-display);
  font-weight: 900;
  font-size: calc(var(--mem-card-size, 80px) * 0.5);
  line-height: 1;
  color: rgba(255, 255, 255, 0.5);
}
.mem-card-front {
  background: #fff;
  transform: rotateY(180deg);
  font-size: calc(var(--mem-card-size, 80px) * 0.55);
  line-height: 1;
}
.mem-card.is-matched .mem-card-front {
  box-shadow:
    inset 0 0 0 2.5px var(--sj-gold),
    0 4px 14px rgba(255, 217, 61, 0.4);
}

/* Brasão (futebol) — shield SVG colorido + nome do time embaixo */
.mem-crest {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: calc(var(--mem-card-size, 80px) * 0.03);
  width: 100%; height: 100%;
}
.mem-crest-svg {
  width:  calc(var(--mem-card-size, 80px) * 0.62);
  height: calc(var(--mem-card-size, 80px) * 0.62 * 72 / 60);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}
.mem-crest-name,
.mem-flag-name {
  font-family: var(--sj-font-mono);
  font-weight: 700;
  font-size: calc(var(--mem-card-size, 80px) * 0.12);
  color: #2d2438;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 92%;
  letter-spacing: 0.02em;
}
/* Bandeira (emoji grande + nome do país embaixo) */
.mem-flag {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: calc(var(--mem-card-size, 80px) * 0.04);
  width: 100%; height: 100%;
}
.mem-flag-emoji {
  font-size: calc(var(--mem-card-size, 80px) * 0.46);
  line-height: 1;
}

/* Números e letras divertidos */
.mem-numlet {
  font-family: var(--sj-font-display);
  font-weight: 900;
  font-size: calc(var(--mem-card-size, 80px) * 0.7);
  line-height: 1;
}

@media (max-width: 600px) {
  .mem { padding: 8px; gap: 10px; }
  .mem-card-back, .mem-card-front { border-radius: 10px; }
}