/* memoria.css — Jogo da Memória */
.mm-menu { position: absolute; inset: 0; overflow: auto; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; padding: 1.4rem 1.5rem 1.6rem; text-align: center; background: radial-gradient(ellipse at 50% 0%, rgba(246,185,59,.14), transparent 55%), radial-gradient(ellipse at 10% 100%, rgba(142,79,216,.25), transparent 60%), var(--night); }
.mm-menu-head h1 { font-size: clamp(2rem, 4vw, 3.2rem); margin: .2rem 0 .3rem; }
.mm-menu-sub { margin: 0 auto; max-width: 62ch; color: var(--cream-dim); font-size: 1.05rem; }
.mm-toggles { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.mm-tg { display: grid; gap: .1rem; text-align: left; min-width: 13rem; padding: .55rem .9rem; border-radius: .9rem; color: var(--cream); background: rgba(255,244,224,.05); border: 2px solid var(--line-strong); transition: border-color .15s, background .15s; }
.mm-tg b { font-weight: 900; }
.mm-tg small { color: var(--cream-dim); font-weight: 700; font-size: .78rem; }
.mm-tg.on { border-color: var(--gold); background: rgba(246,185,59,.14); }
.mm-tg.on b::after { content: " ✓"; color: var(--gold-2); }
.mm-modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; width: min(72rem, 100%); }
.mm-mode { display: grid; align-content: start; gap: .45rem; min-height: 12rem; padding: 1.1rem 1.1rem 1.2rem; text-align: left; border-radius: 1.2rem; color: var(--cream); background: linear-gradient(165deg, #3a1f57, #1d0f2c); border: 2px solid rgba(255,215,122,.35); box-shadow: var(--shadow); transition: transform .15s, border-color .15s; }
.mm-mode:hover { transform: translateY(-4px); border-color: var(--gold); }
.mm-mode.is-supreme { background: linear-gradient(165deg, #5a1630, #24081a); border-color: rgba(255,120,140,.6); }
.mm-mode-level { justify-self: start; font-size: .72rem; font-weight: 1000; letter-spacing: .14em; text-transform: uppercase; padding: .25rem .55rem; border-radius: .45rem; background: var(--gold); color: var(--gold-ink); }
.mm-mode.is-supreme .mm-mode-level { background: var(--bad); color: #2c0306; }
.mm-mode-name { font-family: var(--f-display); font-weight: 900; font-size: 1.35rem; line-height: 1.1; color: var(--gold-2); }
.mm-mode-desc { font-weight: 700; font-size: .92rem; line-height: 1.35; color: var(--cream-dim); }
.mm-mode-count { margin-top: auto; font-weight: 900; font-size: .85rem; }
.mm-resume { margin-top: .2rem; }
@media (max-width: 1000px) { .mm-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.mm-game { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); background: radial-gradient(ellipse at 50% 0%, rgba(246,185,59,.1), transparent 55%), radial-gradient(ellipse at 15% 100%, rgba(142,79,216,.22), transparent 60%), var(--night); }
.mm-bar { display: flex; align-items: center; gap: .8rem; flex-wrap: nowrap; padding: .55rem 1rem; border-bottom: 1px solid var(--line); background: rgba(23,13,34,.75); }
.mm-turn { display: flex; align-items: center; gap: .6rem; padding: .35rem .9rem .35rem .6rem; border-radius: 1rem; background: linear-gradient(135deg, color-mix(in srgb, var(--tc) 38%, var(--night-2)), color-mix(in srgb, var(--tcd) 28%, var(--night))); border: 2px solid var(--tc); box-shadow: 0 0 1.2rem color-mix(in srgb, var(--tc) 40%, transparent); transition: background .3s, border-color .3s; }
.mm-turn-emo { font-size: 1.9rem; line-height: 1; }
.mm-turn-txt small { display: block; font-size: .68rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--cream-dim); }
.mm-turn-txt b { display: block; font-size: 1.15rem; font-weight: 1000; line-height: 1.1; }
.mm-streak { font-weight: 1000; color: var(--gold-2); }
.mm-timer { width: 12rem; }
.mm-timer:empty { display: none; }
.mm-peek { font-weight: 1000; font-size: 1.1rem; color: var(--gold-2); }
.mm-stats { display: flex; gap: .4rem; flex-wrap: wrap; margin-left: auto; justify-content: flex-end; min-width: 0; }
.mm-stat { padding: .3rem .6rem; border-radius: .7rem; background: rgba(255,244,224,.06); border: 1px solid var(--line); font-weight: 800; font-size: .9rem; white-space: nowrap; }
.mm-stat.team-1 b, .mm-stat.team-2 b, .mm-stat.team-3 b { color: var(--tc); }
.mm-bar-actions { display: flex; gap: .4rem; align-items: center; }
.mm-area { position: relative; min-height: 0; display: grid; place-items: center; padding: 8px; overflow: hidden; }
.mm-grid { display: grid; justify-content: center; align-content: center; }

.mm-card { position: relative; padding: 0; border: 0; background: none; perspective: 1000px; cursor: pointer; color: var(--cream); font: inherit; }
.mm-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.3,1.3,.4,1); }
.mm-card.open .mm-in { transform: rotateY(180deg); }
.mm-back, .mm-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-radius: calc(var(--cw) * .09); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.mm-back { background: radial-gradient(circle at 50% 40%, rgba(246,185,59,.2), transparent 60%), repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 8px, transparent 8px 16px), linear-gradient(160deg, #3a1f57, #1b0d29); border: 2px solid rgba(246,185,59,.55); box-shadow: 0 .4rem 1rem rgba(0,0,0,.45), inset 0 0 0 4px rgba(23,13,34,.6), inset 0 0 0 5px rgba(246,185,59,.25); transition: transform .15s, border-color .15s; }
.mm-card:hover:not(.open) .mm-back { transform: translateY(-3px) rotate(-1deg); border-color: var(--gold-2); }
.mm-emblem { width: 50%; aspect-ratio: 1; }
.mm-emblem svg { display: block; width: 100%; height: 100%; }
.mm-stamp { position: absolute; top: 4%; right: 5%; font-size: calc(var(--cw) * .11); }
.mm-card.found { cursor: default; animation: mmMatch .6s ease; }
.mm-card.found .mm-face { border-color: var(--tc); box-shadow: 0 0 0 3px var(--tc), 0 0 1.2rem color-mix(in srgb, var(--tc) 55%, transparent); }
@keyframes mmMatch { 40% { transform: scale(1.07); } }
.mm-card.shake { animation: mmShake .45s ease; }
@keyframes mmShake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.mm-wind { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; pointer-events: none; font-family: var(--f-display); font-weight: 900; font-size: clamp(2.6rem, 7vw, 5.5rem); color: #d7e4ff; text-shadow: 0 .4rem 2rem rgba(0,0,0,.7); background: radial-gradient(ellipse, rgba(93,111,140,.45), transparent 70%); animation: mmWind 1.5s ease forwards; }
@keyframes mmWind { 0% { opacity: 0; transform: scale(.7) rotate(-6deg); } 25% { opacity: 1; transform: scale(1.05) rotate(2deg); } 100% { opacity: 0; transform: scale(1.2) rotate(8deg); } }
.mm-rank { display: grid; gap: .5rem; text-align: left; }
.mm-rank-row { display: grid; grid-template-columns: 2.4rem 1fr auto auto; gap: .7rem; align-items: center; padding: .55rem .8rem; border-radius: .9rem; font-weight: 900; background: color-mix(in srgb, var(--tc) 14%, var(--night-2)); border: 2px solid color-mix(in srgb, var(--tc) 45%, transparent); }
.mm-rank-row.first { border-color: var(--tc); box-shadow: 0 0 1.2rem color-mix(in srgb, var(--tc) 40%, transparent); }
.mm-rank-row b { color: var(--tc); font-size: 1.2rem; }

/* cartas ilustradas */
.mm-face { transform: rotateY(180deg); overflow: hidden; justify-content: flex-start; background: #1d0f2c; border: 3px solid var(--gold); box-shadow: 0 .4rem 1rem rgba(0,0,0,.45); }
.mm-pic { position: relative; flex: 0 0 60%; width: 100%; background-size: cover; background-position: center; }
.mm-pic.is-full { flex: 1 1 auto; height: 100%; }
.mm-ref-tag { position: absolute; left: 5%; bottom: 6%; padding: .15em .5em; border-radius: .4em; font-size: calc(var(--cw) * .072); font-weight: 1000; color: var(--gold-ink); background: linear-gradient(180deg, var(--gold-2), var(--gold)); box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.mm-band { flex: 1; width: 100%; display: grid; place-items: center; padding: 4% 6%; background: linear-gradient(180deg, #2c1a08, #1a0f05); border-top: 2px solid rgba(246,185,59,.6); }
.mm-verse { font-size: calc(var(--cw) * .066); font-weight: 800; line-height: 1.18; color: var(--cream); text-wrap: balance; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.mm-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 10% 6% 5%; font-family: var(--f-display); font-weight: 900; font-size: calc(var(--cw) * .09); color: #fff6e5; background: linear-gradient(180deg, transparent, rgba(14,7,22,.9)); text-shadow: 0 2px 6px rgba(0,0,0,.7); }
.kind-img .mm-face { border-color: #b07bff; }
.mm-scroll { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6%; padding: 7% 8%; background: radial-gradient(circle at 50% 30%, #fff8e6, #f1dfb8 70%, #d9bf8a); color: #3a240c; }
.mm-verse.is-big { font-size: calc(var(--cw) * .085); font-style: italic; color: #3a240c; -webkit-line-clamp: 5; }
.mm-ref { font-family: var(--f-display); font-weight: 900; font-size: calc(var(--cw) * .08); color: #7a2a12; }
.mm-stamp { z-index: 2; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.mm-card.found .mm-face { border-color: var(--tc); }
.mm-mode-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: .2rem; }
.mm-mode-thumbs i { aspect-ratio: 4 / 3; border-radius: .4rem; background-size: cover; background-position: center; background-color: var(--night-2); box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.mm-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(62rem, 100%); }

/* versículo em destaque ao achar o par */
.mm-spot { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; padding: 1rem; background: rgba(10,4,18,.72); backdrop-filter: blur(4px); animation: fadeIn .25s ease; cursor: pointer; }
.mm-spot.out { animation: mmOut .3s ease forwards; }
@keyframes mmOut { to { opacity: 0; } }
.mm-spot-card { display: grid; grid-template-columns: 1.1fr 1fr; width: min(64rem, 100%); max-height: 100%; border-radius: 1.4rem; overflow: hidden; background: linear-gradient(180deg, var(--night-3), var(--night-2)); border: 3px solid var(--tc); box-shadow: var(--shadow), 0 0 3rem color-mix(in srgb, var(--tc) 45%, transparent); animation: popIn .45s cubic-bezier(.2,1.4,.4,1); }
.mm-spot-img { min-height: min(18rem, 45vh); background-size: cover; background-position: center; }
.mm-spot-txt { display: flex; flex-direction: column; justify-content: center; gap: .7rem; padding: clamp(.8rem, 3vh, 1.6rem) 1.8rem; min-width: 0; }
.mm-spot-team { align-self: flex-start; font-weight: 1000; padding: .3rem .8rem; border-radius: 999px; background: color-mix(in srgb, var(--tc) 30%, transparent); border: 2px solid var(--tc); }
.mm-spot-txt blockquote { margin: 0; font-size: clamp(1.1rem, min(2.6vw, 4.6vh), 2.2rem); font-weight: 900; font-style: italic; line-height: 1.25; color: var(--cream); text-wrap: balance; }
.mm-spot-txt b { font-family: var(--f-display); font-size: 1.6rem; color: var(--gold-2); }
.mm-spot-tip { color: var(--cream-dim); font-weight: 800; }
@media (max-aspect-ratio: 4/3) { .mm-spot-card { grid-template-columns: 1fr; } .mm-spot-img { min-height: 12rem; } }