/* Mystery Reveal — the question leads; the covered picture waits beside it. */
.dxg .mx { position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr); gap: clamp(12px, 2.4vw, 28px); padding: clamp(8px, 1.6vh, 18px) clamp(10px, 2.4vw, 28px); align-items: center; }
.mx-task { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mx-bar { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.mx-skill { font-family: var(--g-head); font-size: .85rem; padding: 3px 12px; border-radius: 999px; background: #DDF2F0; color: #0E4A49; }
.mx-count { font-family: var(--g-head); color: var(--g-navy); }
.mx-help { min-height: 34px; font-size: .85rem; padding: 0 12px; }
.mx-help__text { margin: 0; padding: 6px 12px; border-radius: 12px; background: #FFF6D6; font-size: .95rem; line-height: 1.45; }
.mx-body { display: flex; justify-content: center; }
.mx-body .dxq-choices { width: 100%; }
.mx-streak { position: absolute; top: 0; right: 0; padding: 3px 12px; border-radius: 999px; background: #FFF5D1; border: 2px solid #E9C85A; font-family: var(--g-head); font-weight: 600; font-size: .9rem; color: #5C4500; opacity: 0; transition: opacity .2s; }
.mx-streak.is-on { opacity: 1; }
/* The mystery frame */
.mx-side { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.mx-frame { position: relative; width: 100%; max-width: 440px; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; border: 4px solid #1C2B3D; box-shadow: 0 8px 20px rgba(28, 43, 61, .18); background: #1C2B3D; }
.mx-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mx-cover { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-template-rows: repeat(var(--rows), 1fr); gap: 2px; }
.mx-tile { display: grid; place-items: center; background: #17706F; transition: opacity .45s ease, transform .45s cubic-bezier(.4, 0, .6, 1); }
.mx-tile--1 { background: #1B7C7B; } .mx-tile--2 { background: #146564; } .mx-tile--3 { background: #1A7473; } .mx-tile--4 { background: #12605F; }
.mx-tile__q { font-family: var(--g-head); font-weight: 700; font-size: clamp(1.1rem, 2vw, 1.6rem); color: rgba(255, 255, 255, .28); }
.mx-tile.is-gone { opacity: 0; transform: rotateX(80deg) scale(.9); pointer-events: none; }
.mx-progress { margin: 0; font-family: var(--g-head); font-weight: 500; color: var(--g-navy); text-align: center; }
.mx-progress.is-solved { color: var(--g-aqua-dark); }
.mx-guess { min-height: 40px; font-size: .95rem; }
.mx-guess:disabled { opacity: .5; }
.mx-guessbox { width: 100%; max-width: 440px; padding: 10px; border-radius: 14px; background: #fff; border: 2px solid var(--g-border); box-shadow: 0 6px 16px rgba(28,43,61,.12); }
.mx-guessbox__q { margin: 0 0 8px; font-family: var(--g-head); font-weight: 500; text-align: center; }
.mx-guessbox__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mx-guessopt { min-height: 46px; border-radius: 12px; border: 2px solid var(--g-border); background: #F7FAFA; font-family: var(--g-head); font-size: 1.05rem; color: var(--g-navy); cursor: pointer; }
.mx-guessopt:hover { border-color: var(--g-aqua); }
.mx-guessopt:focus-visible { outline: 3px solid var(--g-blue); outline-offset: 2px; }
/* The big reveal */
.mx.is-done .mx-task { display: none; }
.mx.is-done { grid-template-columns: 1fr; justify-items: center; align-content: center; }
.mx.is-done .mx-frame { max-width: 560px; animation: mx-grow .6s ease-out; }
.mx.is-done .mx-guess, .mx.is-done .mx-guessbox { display: none; }
@keyframes mx-grow { from { transform: scale(.94); } }
.mx-finale { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.mx-finale[hidden] { display: none !important; }
.mx-finale__title { margin: 0; font-family: var(--g-head); font-weight: 700; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); color: var(--g-blue); }
.mx-finale__name { margin: 0; font-family: var(--g-head); font-size: 1.2rem; }
.mx-finale__fact { margin: 0; max-width: 560px; padding: 6px 14px; border-radius: 12px; background: #FFF6D6; font-size: 1rem; }
.mx-finale__go { min-height: 50px; margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .mx-tile { transition: opacity .1s linear; } .mx-tile.is-gone { transform: none; } .mx.is-done .mx-frame { animation: none; } }
@media (max-width: 759px) {
	.dxg .mx { grid-template-columns: 1fr; align-content: start; gap: 10px; padding: 8px; }
	.mx-side { order: -1; }
	.mx-frame { max-width: 300px; }
	.mx-skill { display: none; }
	.mx-guessbox { max-width: 300px; }
}
@media (max-height: 700px) and (min-width: 760px) { .mx-frame { max-width: 380px; } }