/* Word Maze — stepping stones through a meadow. Words stay the brightest thing on screen. */
.dxg .wm {
	height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 18px;
	padding: clamp(8px, 1.6vh, 16px) clamp(10px, 2.2vw, 24px);
}
.wm-boardwrap { container-type: size; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; }
.wm-board {
	--rows: 5; --cols: 6;
	position: relative; display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-template-rows: repeat(var(--rows), 1fr);
	gap: clamp(6px, 1.2vw, 10px); padding: clamp(8px, 1.4vw, 14px); border-radius: 22px;
	width: min(100cqw, 100cqh * var(--cols) / var(--rows) * 1.45); aspect-ratio: calc(var(--cols) * 1.45) / var(--rows);
	background: #E6F4EA; background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,.5) 0 6%, transparent 7%), radial-gradient(circle at 80% 70%, rgba(255,255,255,.4) 0 5%, transparent 6%);
	border: 3px solid #BFE0C9;
}
.wm-cell { position: relative; min-width: 0; min-height: 0; border-radius: 14px; }
.wm-trail { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; }
.wm-trail polyline { fill: none; stroke: #17706F; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 12; opacity: .55; }
.wm-start, .wm-goal-cell { z-index: 1; }
/* Word stones: all look the same until you step, so reading decides */
.wm-stone {
	display: grid; place-items: center; margin: 0; padding: 0 4px; cursor: pointer; z-index: 1;
	background: transparent; border: 0; color: var(--g-navy);
	font-family: var(--g-head); font-weight: 500; line-height: 1;
	/* sized from the board: about a third of a stone's height, capped by its width */
	font-size: clamp(1.2rem, min(6.4cqh, 3.3cqw), 2.3rem);
	transition: transform .1s ease, border-color .15s ease, background-color .2s ease; -webkit-tap-highlight-color: transparent;
}
.wm-stone__rock {
	position: absolute; inset: 4% 2%; border-radius: var(--shape, 50%); transform: rotate(var(--tilt, 0deg));
	background: #fff; border: 2px solid #C9D6D8; border-bottom-width: 5px; box-shadow: 0 3px 0 rgba(28, 43, 61, .06);
	transition: border-color .15s ease, background-color .2s ease;
}
.wm-stone__word { position: relative; }
.wm-stone.is-near .wm-stone__rock { border-color: #7CCBC4; box-shadow: 0 0 0 3px rgba(23, 112, 111, .14); }
.wm-stone.is-near:hover { transform: translateY(-2px); }
.wm-stone.is-near:hover .wm-stone__rock { border-color: var(--g-aqua); }
.wm-stone:focus-visible, .wm-goal-cell:focus-visible { outline: 4px solid var(--g-blue); outline-offset: 2px; }
/* On the path: stays readable, marked by color + footprints (not color alone) */
.wm-stone.is-solved .wm-stone__rock { background: #DDF2F0; border-color: #7CCBC4; }
.wm-stone.is-solved::after { content: "••"; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); font-size: .7rem; letter-spacing: 4px; color: var(--g-aqua-dark); }
/* Tried and wrong: dashed edge + small ✕ so students remember, word still readable */
.wm-stone.is-miss .wm-stone__rock { border-style: dashed; border-color: #E08B7A; background: #FFF8F6; }
.wm-stone.is-miss::before { content: "✕"; position: absolute; top: -8px; right: -6px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
	background: #9E3647; color: #fff; font-size: 11px; font-weight: 700; font-family: var(--g-body); }
.wm-stone.is-wrong { animation: dxg-wiggle .38s ease-in-out; }
.wm-board.is-resting .wm-stone:not(.is-solved) { cursor: default; }
.wm-start { display: grid; place-items: end center; padding-bottom: 4px; background: #FFF6D6; border: 2px solid #E0C052; }
.wm-start__label { font-family: var(--g-head); font-weight: 600; font-size: .7rem; letter-spacing: .08em; color: #5C4500; }
.wm-goal-cell { display: grid; place-items: center; margin: 0; padding: 6%; border: 2px dashed #E0C052; background: #FFF6D6; cursor: pointer; }
.wm-goal-cell svg { width: 80%; height: 80%; }
.wm-goal-cell.is-near { border-style: solid; box-shadow: 0 0 0 4px rgba(246, 216, 120, .5); }
.wm-board.is-done .wm-goal-cell { animation: wm-glow .9s ease-out 2; }
@keyframes wm-glow { 50% { box-shadow: 0 0 0 10px rgba(246, 216, 120, .7); } }
.wm-scenery { display: grid; place-items: center; opacity: .75; }
.wm-scenery svg { width: 70%; height: 70%; }
/* The explorer glides between cells; its artwork is swappable (skins) */
.wm-token {
	/* perched on the top edge of its stone so the word underneath stays readable */
	position: absolute; left: 0; top: 0; width: 40px; height: 40px; margin: -58px 0 0 -20px; z-index: 3; pointer-events: none;
	transition: transform .28s cubic-bezier(.3, 1.2, .5, 1); filter: drop-shadow(0 3px 3px rgba(28, 43, 61, .18));
}
.wm-token svg { width: 100%; height: 100%; }

/* Side panel: the goal is always visible */
.wm-side { display: flex; flex-direction: column; gap: 8px; align-self: center; min-width: 0; }
.wm-goal { margin: 0; font-family: var(--g-head); font-weight: 500; font-size: 1.05rem; color: var(--g-navy); }
.wm-goal__chip { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--g-yellow); font-weight: 600; }
.wm-count { margin: 0; font-family: var(--g-head); color: var(--g-muted); font-size: .95rem; }
.wm-near__label { margin: 4px 0 0; font-family: var(--g-head); font-size: .85rem; color: var(--g-muted); }
.wm-near { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.wm-near__btn { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; border-radius: 12px; border: 2px solid var(--g-border); background: #fff; cursor: pointer;
	font-family: var(--g-head); font-size: 1.05rem; color: var(--g-navy); }
.wm-near__btn--up { grid-column: 1 / -1; justify-self: center; min-width: 50%; }
.wm-near__btn--down { grid-column: 1 / -1; justify-self: center; min-width: 50%; }
.wm-near__btn:disabled { opacity: .45; cursor: default; }
.wm-near__btn:focus-visible { outline: 3px solid var(--g-blue); outline-offset: 2px; }
.wm-near__btn.is-miss { border-style: dashed; border-color: #E08B7A; }
.wm-near__btn.is-solved { background: #DDF2F0; }
.wm-near__arrow { color: var(--g-muted); font-size: .95rem; }
.wm-help { align-self: flex-start; min-height: 36px; font-size: .9rem; padding: 0 14px; }
.wm-help__text { margin: 0; padding: 8px 10px; border-radius: 12px; background: #FFF6D6; font-size: .95rem; line-height: 1.45; }
.wm-msg { margin: 0; min-height: 2.6em; font-family: var(--g-head); font-weight: 500; font-size: .98rem; color: var(--g-blue); }

@media (prefers-reduced-motion: reduce) { .wm-token { transition: none; } }
@media (max-width: 859px) {
	.dxg .wm { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 8px; padding: 8px; }
	.wm-side { order: -1; align-self: stretch; display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; }
	.wm-goal { grid-column: 1 / -1; font-size: .95rem; }
	.wm-near, .wm-near__label, .wm-help__text { display: none; }
	.wm-help { grid-row: 2; grid-column: 2; }
	.wm-help__text:not([hidden]) { display: block; grid-column: 1 / -1; }
	.wm-msg { grid-column: 1 / -1; min-height: 1.3em; font-size: .9rem; }
	.wm-board { width: min(100cqw, 100cqh * var(--cols) / var(--rows) * 1.2); aspect-ratio: calc(var(--cols) * 1.2) / var(--rows); }
	.wm-stone { font-size: clamp(1.1rem, min(6.6cqw, 5.2cqh), 1.75rem); }
	.wm-token { width: 32px; height: 32px; margin: -46px 0 0 -16px; }
}