/* Bible Memory v2 — uses the app theme variables from app.css */
.mg{position:fixed;inset:0;z-index:110;overflow:auto;background:var(--bg);color:var(--ink);font-family:var(--ui);padding-bottom:calc(24px + env(safe-area-inset-bottom))}
body.inGame{overflow:hidden}
.mgBar{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:6px;padding:8px 10px;padding-top:calc(8px + env(safe-area-inset-top));background:var(--bar);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.mgTitle{flex:1;text-align:center;font:800 17px/1 var(--ui)}
.mgWrap{max-width:860px;margin:0 auto;padding:14px 16px}
.mgLevels button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.mgLevels small{font:600 11.5px/1 var(--ui);opacity:.8}
.mgStats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0 8px}
.mgStats span{background:var(--surface);border-radius:14px;padding:8px 6px;text-align:center;box-shadow:0 1px 2px rgba(var(--shadowC),.05)}
.mgStats small{display:block;font:700 10.5px/1 var(--ui);letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.mgStats b{font:800 17px/1 var(--ui);color:var(--ink);font-variant-numeric:tabular-nums}
.mgFound{min-height:44px;margin:6px 2px 10px;font:500 14.5px/1.4 var(--ui);color:var(--ink2);text-align:center}
.mgFound b{color:var(--accentText)}
.mgGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mgGrid.n16,.mgGrid.n24{grid-template-columns:repeat(4,1fr)}
@media (min-width:700px){.mgGrid{grid-template-columns:repeat(4,1fr);gap:14px}.mgGrid.n24{grid-template-columns:repeat(6,1fr)}.mgWrap{padding:20px 28px}}
.mgCard{position:relative;aspect-ratio:3/4;min-height:44px;perspective:900px;border-radius:16px;padding:0}
.mgInner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.mgCard.up .mgInner,.mgCard.done .mgInner{transform:rotateY(180deg)}
.mgFace{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.mgBack{background:linear-gradient(150deg,var(--fill),#3E4A1E);box-shadow:0 6px 16px -8px rgba(var(--shadowC),.45);border:1px solid rgba(255,255,255,.12)}
.mgBack img{width:46%;border-radius:10px;background:#fff;padding:5px;opacity:.95}
.mgBack:after{content:"";position:absolute;inset:6px;border:1.5px solid rgba(255,255,255,.28);border-radius:11px}
.mgFront{transform:rotateY(180deg);background:var(--surface);border:1.5px solid var(--tint2);padding:6px 6px 8px;gap:4px;justify-content:flex-start}
.mgArt{width:100%;aspect-ratio:1;border-radius:11px;background-repeat:no-repeat;background-size:500% 300%;background-color:var(--tint)}
.mgName{font:700 clamp(10.5px,2.7vw,13.5px)/1.15 var(--ui);color:var(--ink);text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mgRef{font:600 clamp(10px,2.4vw,12px)/1 var(--scripture);color:var(--accentText)}
.mgCard.done .mgFront{border-color:var(--accent);box-shadow:0 0 0 2px var(--tint2)}
.mgCard.done{animation:mgPop .45s ease .3s}
@keyframes mgPop{50%{transform:scale(1.05)}}
.mgCard.miss .mgFront{border-color:#C0392B}
.mgWin{position:fixed;inset:0;z-index:5;display:grid;place-items:center;padding:18px;background:var(--scrim);animation:mgFade .35s ease}
@keyframes mgFade{from{opacity:0}}
.mgWinBox{width:min(520px,100%);background:var(--surface);border-radius:26px;padding:24px 22px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.3);animation:mgUp .45s cubic-bezier(.2,.8,.2,1)}
@keyframes mgUp{from{transform:translateY(24px);opacity:0}}
.mgWinBox h2{margin:8px 0 6px;font:700 26px/1.2 var(--scripture)}
.mgWinStats{margin:0;font:600 15px/1.4 var(--ui);color:var(--ink2)}
.mgNewBest{margin:8px 0 0;font:800 14px/1.3 var(--ui);color:var(--accentText)}
.mgVerse{margin:16px 0;padding:14px 16px;border-radius:16px;background:var(--tint);font:400 18px/1.6 var(--scripture);color:var(--verseInk);text-align:left}
.mgVerse cite{display:block;margin-top:6px;font:700 13px/1 var(--ui);font-style:normal;color:var(--accentText)}
.mgWinBtns{justify-content:center}
@media (hover:hover){.mgCard:not(.up):not(.done):hover .mgBack{filter:brightness(1.1)}}
@media (prefers-reduced-motion:reduce){.mgInner{transition:none}.mgCard.done{animation:none}}