/* Spell It! — picture first, then three equal spelling choices. */
.dxg .spi {
	position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: clamp(8px, 2vh, 18px); padding: clamp(10px, 2vh, 22px) clamp(10px, 3vw, 32px);
}
.spi-prompt {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	width: min(100%, 420px); flex: 1 1 auto; min-height: 0; max-height: 44vh;
	background: #fff; border: 2px solid var(--g-border); border-radius: 22px; padding: 12px 16px;
}
.spi-img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.spi-text { margin: 0; font-size: 1.4rem; text-align: center; }
.spi-word { margin: 0; font-family: var(--g-head); font-weight: 600; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); color: var(--g-blue); height: 0; overflow: hidden; opacity: 0; transition: opacity .2s; }
.spi-word.is-on { height: auto; opacity: 1; }

/* Three equal choices: nothing distinguishes the correct one before a choice */
.spi-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 2vw, 20px); width: min(100%, 760px); }
.spi-choices.is-resting .spi-choice:not(:disabled) { opacity: .7; }
.spi-choice {
	position: relative; min-height: 84px; padding: 0 12px; margin: 0; cursor: pointer;
	border-radius: 18px; border: 3px solid #B9C8CA; border-bottom-width: 6px; background: #fff;
	font-family: var(--g-head); font-weight: 500; font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.7rem); color: var(--g-navy); line-height: 1;
	transition: transform .1s ease, border-color .15s ease, background-color .15s ease, opacity .15s ease;
	-webkit-tap-highlight-color: transparent;
}
.spi-choice:hover:not(:disabled) { border-color: var(--g-aqua); transform: translateY(-2px); }
.spi-choice:focus-visible { outline: 4px solid var(--g-blue); outline-offset: 3px; }
.spi-choice__key {
	position: absolute; top: 6px; left: 8px; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center;
	background: var(--g-light); border: 1px solid var(--g-border); font-family: var(--g-head); font-size: .8rem; color: var(--g-muted);
}
.spi-choice.is-wrong { cursor: default; border-style: dashed; border-color: #F2A08F; background: #FFF8F6; color: #6B7684; animation: dxg-wiggle .38s ease-in-out; }
.spi-choice.is-wrong .spi-choice__text { text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: #C0475A; }
.spi-choice.is-wrong::after { content: "✕"; position: absolute; top: -10px; right: -8px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #9E3647; color: #fff; font-size: 14px; font-weight: 700; font-family: var(--g-body); }
.spi-choice.is-right { border-color: var(--g-aqua); background: #E2F5F3; animation: spi-yes .4s ease-out; }
.spi-choice.is-right::after { content: "✓"; position: absolute; top: -10px; right: -8px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--g-aqua); color: #fff; font-size: 14px; font-weight: 700; font-family: var(--g-body); }
.spi-choice.is-faded { opacity: .35; }
@keyframes spi-yes { 40% { transform: scale(1.06); } }
.spi-msg { margin: 0; min-height: 1.5em; font-family: var(--g-head); font-weight: 500; color: var(--g-blue); text-align: center; }
.spi-streak {
	position: absolute; top: 10px; right: 14px; padding: 4px 14px; border-radius: 999px; background: #FFF5D1; border: 2px solid #E9C85A;
	font-family: var(--g-head); font-weight: 600; font-size: 0.95rem; color: #5C4500; opacity: 0; transition: opacity .2s;
}
.spi-streak.is-on { opacity: 1; }
@media (max-width: 599px) {
	.dxg .spi { gap: 10px; padding: 10px; }
	.spi-prompt { max-height: 40vh; border-radius: 16px; padding: 8px; }
	.spi-choices { grid-template-columns: 1fr; gap: 8px; }
	.spi-choice { min-height: 58px; font-size: 1.8rem; }
	.spi-streak { top: 4px; right: 6px; font-size: .8rem; }
}