/* Cocok Gambar: papan kartu memory (gambar dan nama) */
.cg-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: clamp(6px, 1.2vh, 14px); padding: clamp(8px, 1.6vw, 20px); position: relative; background: linear-gradient(135deg, var(--sky-50), var(--amber-100) 80%); }
.cg-score { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chip { display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 16px; border-radius: 999px; background: #fff; border: 3px solid var(--line); font-family: var(--font); color: var(--ink); }
.chip .l { font-weight: 700; font-size: clamp(13px, 1.5vw, 18px); color: var(--muted); }
.chip b { font-weight: 800; font-size: clamp(16px, 2vw, 26px); }
.chip.a { border-color: var(--team-a); } .chip.b { border-color: var(--team-b); }
.chip.a .l { color: var(--team-a); } .chip.b .l { color: var(--team-b); }
.chip.turn { box-shadow: 0 0 0 4px var(--amber); transform: scale(1.05); }
.cg-board { flex: 1; min-height: 0; display: grid; justify-content: center; align-content: center; }

.card3d { --cs: 80px; padding: 0; border: 0; background: transparent; perspective: 700px; cursor: pointer; touch-action: manipulation; width: 100%; height: 100%; }
.card3d .inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .35s ease; }
.card3d.open .inner { transform: rotateY(180deg); }
.card3d .back, .card3d .front { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 16%; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 5px 0 rgba(0,0,0,.18); overflow: hidden; }
.card3d .back { background: repeating-linear-gradient(45deg, #7c3aed 0 10px, #8b5cf6 10px 20px); border: 4px solid #fff; }
.card3d .back i { width: 34%; aspect-ratio: 1; background: #fde047; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.card3d .front { transform: rotateY(180deg); background: #fff; border: 4px solid var(--sky-d); padding: 6%; }
.card3d .front.word { background: #fffbeb; border-color: var(--amber); }
.card3d .front img { width: 78%; height: 78%; object-fit: contain; display: block; }
.card3d .front .w { font-family: var(--font); font-weight: 800; color: var(--ink); text-align: center; line-height: 1.1; overflow-wrap: anywhere; }
.card3d.done .front { border-color: var(--ok); background: #ecfdf5; }
.card3d.done .front.word { background: #d1fae5; }
.card3d.done .inner { animation: cg-done .4s; }
@keyframes cg-done { 50% { transform: rotateY(180deg) scale(1.1); } }
.card3d:focus-visible { outline: 4px solid var(--amber); outline-offset: 3px; }

.cg-toast { position: absolute; left: 50%; bottom: 10px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; max-width: calc(100% - 24px); padding: 8px 18px; border-radius: 999px; background: #fff; border: 4px solid var(--ok); font-weight: 800; color: var(--ink); font-size: clamp(13px, 1.7vw, 22px); text-align: center; transition: opacity .2s, transform .2s; z-index: 5; }
.cg-toast.show { opacity: 1; transform: translate(-50%, 0); }
b#contoh img.ex { height: 44px; width: 44px; vertical-align: middle; }
@media (max-height: 520px) {
  .cg-body { padding: 6px 10px; gap: 4px; }
  .chip { padding: 2px 12px; border-width: 2px; }
  .card3d .back, .card3d .front { border-width: 3px; }
  b#contoh img.ex { height: 32px; width: 32px; }
  .cg-toast { bottom: 4px; padding: 4px 12px; border-width: 3px; }
}
@media (prefers-reduced-motion: reduce) { .card3d .inner { transition: none; } .card3d.done .inner { animation: none; } }