/* Game: Lật hình tìm cặp */
.arcade-lat-hinh { --lh-ink: #1C1433; --lh-face: #fff; --lh-ok: #16B989; --lh-bad: #FF4D6D; --lh-gap: 12px; }
.arcade[data-theme="sang"] .arcade-lat-hinh { --lh-face: #FBF3DE; }
.arcade-lat-hinh .lh-wrap { width: min(100%, 640px); display: flex; flex-direction: column; align-items: center; }
.arcade-lat-hinh .lh-wrap[data-rows="3"] { width: min(100%, 540px); }
.arcade-lat-hinh .lh-wrap[data-rows="4"] { width: min(100%, 480px); }
.arcade-lat-hinh .lh-title { margin: 0 0 14px; color: var(--a-fg); font-size: clamp(1.6rem, 4vw, 2.3rem); text-align: center; overflow-wrap: anywhere; }

/* HUD */
.arcade-lat-hinh .lh-hud { display: flex; justify-content: center; gap: 8px; width: 100%; margin-bottom: 12px; }
.arcade-lat-hinh .lh-chip { flex: 1 1 0; max-width: 150px; display: flex; flex-direction: column; align-items: center; padding: 6px 10px 5px; border: 2px solid color-mix(in srgb, var(--a-fg) 22%, transparent); border-radius: 16px; background: color-mix(in srgb, var(--a-fg) 9%, transparent); line-height: 1.1; }
.arcade-lat-hinh .lh-chip-k { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .78; white-space: nowrap; }
.arcade-lat-hinh .lh-chip-v { font-family: var(--display, system-ui); font-weight: 800; font-size: 1.45rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.arcade-lat-hinh .lh-c-pairs .lh-chip-v { color: var(--a-accent); }
.arcade[data-theme="hong"] .arcade-lat-hinh .lh-chip { background: rgba(255,255,255,.7); }
.arcade-lat-hinh.lh-low .lh-c-time { border-color: var(--lh-bad); background: color-mix(in srgb, var(--lh-bad) 22%, transparent); }
.arcade-lat-hinh.lh-low .lh-c-time .lh-chip-v { animation: lh-beat 1s ease-in-out infinite; }

.arcade-lat-hinh .lh-timer { width: 100%; height: 12px; margin-bottom: 16px; padding: 2px; border: 2px solid var(--lh-ink); border-radius: 999px; background: color-mix(in srgb, var(--a-fg) 14%, var(--a-bg)); overflow: hidden; }
.arcade-lat-hinh .lh-timer-fill { display: block; height: 100%; border-radius: 999px; background: var(--a-accent); transform-origin: left center; transition: transform .2s linear, background-color .3s; }
.arcade-lat-hinh.lh-low .lh-timer-fill { background: var(--lh-bad); }

/* Bàn thẻ */
.arcade-lat-hinh .lh-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--lh-gap); width: 100%; padding-bottom: 4px; }
.arcade-lat-hinh .lh-card { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; padding: 0; border: 0; border-radius: 16px; background: none; color: var(--lh-ink); font: inherit; cursor: pointer; perspective: 800px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; container-type: inline-size; transition: transform .15s ease; }
.arcade-lat-hinh .lh-card:hover:not(.is-open) { transform: translateY(-3px); }
.arcade-lat-hinh .lh-card:active:not(.is-open) { transform: translateY(1px); }
.arcade-lat-hinh .lh-card:focus-visible { outline: 3px solid var(--a-accent); outline-offset: 3px; }
.arcade[data-theme="tet"] .arcade-lat-hinh .lh-card:focus-visible, .arcade[data-theme="sang"] .arcade-lat-hinh .lh-card:focus-visible { outline-color: #fff; }
.arcade-lat-hinh .lh-inner { position: absolute; inset: 0; display: block; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.3,1.35,.5,1); }
.arcade-lat-hinh .lh-card.is-open .lh-inner { transform: rotateY(180deg); }
.arcade-lat-hinh .lh-back, .arcade-lat-hinh .lh-face { position: absolute; inset: 0; display: flex; border: 2px solid var(--lh-ink); border-radius: 16px; box-shadow: 0 4px 0 var(--lh-ink); -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; }

/* Mặt sau: màu nhấn + chấm bi + khung chỉ */
.arcade-lat-hinh .lh-back { align-items: center; justify-content: center; background-color: var(--a-accent);
	background-image: radial-gradient(color-mix(in srgb, var(--a-accent-ink) 16%, transparent) 1.5px, transparent 2px), linear-gradient(135deg, rgba(255,255,255,.28), rgba(255,255,255,0) 55%);
	background-size: 11px 11px, 100% 100%; }
.arcade-lat-hinh .lh-back::before { content: ""; position: absolute; inset: 6px; border: 2px dashed color-mix(in srgb, var(--a-accent-ink) 30%, transparent); border-radius: 10px; }
.arcade-lat-hinh .lh-mark { position: relative; display: grid; place-items: center; width: 46%; aspect-ratio: 1; border: 2px solid var(--lh-ink); border-radius: 50%; background: var(--a-bg); color: var(--a-accent); box-shadow: 0 3px 0 var(--lh-ink); font-family: var(--display, system-ui); font-weight: 800; font-size: 30px; font-size: clamp(18px, 26cqi, 40px); line-height: 1; padding-top: .08em; }
.arcade[data-theme="hong"] .arcade-lat-hinh .lh-mark { background: #fff; }

/* Mặt trước: hình sản phẩm + tên */
.arcade-lat-hinh .lh-face { flex-direction: column; align-items: center; justify-content: center; gap: 4%; padding: 8% 6% 9%; background: var(--lh-face); transform: rotateY(180deg); }
.arcade-lat-hinh .lh-art { position: relative; display: grid; place-items: center; width: 74%; aspect-ratio: 1; border-radius: 50%; }
.arcade-lat-hinh .lh-t1 .lh-art { background: color-mix(in srgb, var(--a-c1) 24%, var(--lh-face)); }
.arcade-lat-hinh .lh-t3 .lh-art { background: color-mix(in srgb, var(--a-accent) 26%, var(--lh-face)); }
.arcade-lat-hinh .lh-t4 .lh-art { background: color-mix(in srgb, var(--a-c4) 30%, var(--lh-face)); }
.arcade[data-theme="sang"] .arcade-lat-hinh .lh-t4 .lh-art, .arcade[data-theme="la"] .arcade-lat-hinh .lh-t4 .lh-art { background: color-mix(in srgb, var(--a-c1) 20%, var(--lh-face)); }
.arcade-lat-hinh .lh-ic { display: block; width: 86%; height: auto; overflow: visible; }
.arcade-lat-hinh .lh-ic .a { fill: var(--a-accent); }
.arcade-lat-hinh .lh-ic .p { fill: var(--a-c1); }
.arcade-lat-hinh .lh-ic .s { fill: var(--a-c3); }
.arcade-lat-hinh .lh-ic .m { fill: var(--a-c4); }
.arcade-lat-hinh .lh-ic .w { fill: #fff; }
.arcade-lat-hinh .lh-ic .k { fill: #1C1433; }
.arcade-lat-hinh .lh-ic .hl { stroke: #fff; stroke-width: 2.5; }
.arcade-lat-hinh .lh-ic .sa { stroke: var(--a-accent); }
.arcade-lat-hinh .lh-label { max-width: 100%; color: var(--lh-ink); font-weight: 700; font-size: 12px; font-size: clamp(10.5px, 12.5cqi, 16px); line-height: 1.15; text-align: center; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.arcade-lat-hinh .lh-check { position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid var(--lh-ink); border-radius: 50%; background: var(--lh-ok); transform: scale(0); transition: transform .3s cubic-bezier(.2,1.6,.4,1) .15s; }
.arcade-lat-hinh .lh-check svg { width: 16px; height: 16px; }

/* Trạng thái */
.arcade-lat-hinh .lh-card.is-open, .arcade-lat-hinh .lh-card[aria-disabled="true"] { cursor: default; }
.arcade-lat-hinh .lh-card.is-matched .lh-face { border-color: var(--lh-ink); box-shadow: 0 4px 0 var(--lh-ink), 0 0 0 4px var(--lh-ok), 0 0 22px 6px color-mix(in srgb, var(--lh-ok) 45%, transparent); }
.arcade-lat-hinh .lh-card.is-matched .lh-check { transform: scale(1); }
.arcade-lat-hinh .lh-card.is-matched .lh-inner { animation: lh-pop .5s ease .35s; }
.arcade-lat-hinh .lh-card.is-wrong .lh-face { box-shadow: 0 4px 0 var(--lh-ink), 0 0 0 4px var(--lh-bad); }
.arcade-lat-hinh .lh-card.is-wrong .lh-inner { animation: lh-shake .42s ease .4s; }
.arcade-lat-hinh .lh-card.is-reveal .lh-face { opacity: .62; filter: saturate(.55); }
.arcade-lat-hinh.lh-won .lh-card.is-matched .lh-face { box-shadow: 0 4px 0 var(--lh-ink), 0 0 0 4px var(--a-accent), 0 0 26px 6px color-mix(in srgb, var(--a-accent) 55%, transparent); }
.arcade-lat-hinh.lh-over .lh-card { transform: none; }

.arcade-lat-hinh .lh-status { min-height: 2.9em; max-width: 46ch; margin: 14px 0 0; font-weight: 600; text-align: center; opacity: .92; line-height: 1.4; }
.arcade-lat-hinh .lh-again { margin-top: 6px; min-width: 180px; background: var(--a-accent); color: var(--a-accent-ink); border-color: var(--lh-ink); box-shadow: 0 5px 0 var(--lh-ink); }
.arcade-lat-hinh .lh-again:hover { color: var(--a-accent-ink); }
.arcade-lat-hinh .lh-again[hidden] { display: none; }

@keyframes lh-pop { 0%, 100% { transform: rotateY(180deg) scale(1); } 45% { transform: rotateY(180deg) scale(1.08); } }
@keyframes lh-shake { 0%, 100% { transform: rotateY(180deg) translateX(0); } 20%, 60% { transform: rotateY(180deg) translateX(-5px); } 40%, 80% { transform: rotateY(180deg) translateX(5px); } }
@keyframes lh-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

@media (max-width: 640px) {
	.arcade-lat-hinh { --lh-gap: 8px; }
	.arcade-lat-hinh .lh-title { margin-bottom: 10px; }
	.arcade-lat-hinh .lh-hud { gap: 6px; margin-bottom: 10px; }
	.arcade-lat-hinh .lh-chip { padding: 5px 6px 4px; border-radius: 14px; }
	.arcade-lat-hinh .lh-chip-k { font-size: .64rem; letter-spacing: .02em; }
	.arcade-lat-hinh .lh-chip-v { font-size: 1.2rem; }
	.arcade-lat-hinh .lh-timer { margin-bottom: 12px; }
	.arcade-lat-hinh .lh-card, .arcade-lat-hinh .lh-back, .arcade-lat-hinh .lh-face { border-radius: 12px; }
	.arcade-lat-hinh .lh-back::before { inset: 4px; border-radius: 8px; }
	.arcade-lat-hinh .lh-face { padding: 7% 4% 8%; }
	.arcade-lat-hinh .lh-art { width: 68%; }
	.arcade-lat-hinh .lh-check { top: 3px; right: 3px; width: 20px; height: 20px; }
	.arcade-lat-hinh .lh-check svg { width: 13px; height: 13px; }
	.arcade-lat-hinh .lh-status { font-size: .92rem; margin-top: 12px; }
}

/* Giảm chuyển động: lật tức thì, không rung */
.arcade-lat-hinh.lh-reduced .lh-inner, .arcade-lat-hinh.lh-reduced .lh-card, .arcade-lat-hinh.lh-reduced .lh-check, .arcade-lat-hinh.lh-reduced .lh-timer-fill { transition: none; }
.arcade-lat-hinh.lh-reduced .lh-card .lh-inner, .arcade-lat-hinh.lh-reduced .lh-chip-v { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
	.arcade-lat-hinh .lh-inner, .arcade-lat-hinh .lh-card, .arcade-lat-hinh .lh-check, .arcade-lat-hinh .lh-timer-fill { transition: none; }
	.arcade-lat-hinh .lh-card .lh-inner, .arcade-lat-hinh .lh-chip-v { animation: none !important; }
}