/* Syllable Mix — word-building pieces that snap together. */
.dxg .sm {
	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); overflow-y: auto;
}
.sm-skill { font-family: var(--g-head); font-size: 0.85rem; padding: 3px 12px; border-radius: 999px; background: #DDF2F0; color: #0E4A49; }
.sm-instr { margin: 0; font-size: 1.1rem; color: var(--g-navy); text-align: center; }

/* The build row: where the word is assembled */
.sm-row {
	display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 104px; min-width: min(100%, 460px);
	padding: 12px 16px; border-radius: 22px; background: #fff; border: 2px solid var(--g-border);
	box-shadow: inset 0 -5px 0 rgba(28, 43, 61, .04); transition: border-color .15s, background-color .15s, gap .25s ease;
}
.sm-row.is-target { border-color: var(--g-aqua); background: #F3FBFA; }
.sm .dxo-slot { width: 104px; height: 76px; border-radius: 16px; border: 3px dashed #C9D6D8; flex: 0 0 auto; }
.sm .dxo-insert { width: 6px; height: 72px; border-radius: 3px; background: var(--g-aqua); flex: 0 0 auto; animation: sm-blink .8s ease-in-out infinite alternate; }
@keyframes sm-blink { from { opacity: .45; } to { opacity: 1; } }

/* The tray: scrambled pieces */
.sm-tray { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; min-height: 90px; align-items: center; }

/* A syllable tile: a chunky, physical-feeling block */
.sm .dxo-tile {
	position: relative; min-width: 104px; height: 76px; padding: 0 20px; margin: 0; cursor: grab; touch-action: none;
	border-radius: 16px; border: 3px solid var(--t-edge); border-bottom-width: 7px; background: var(--t-fill);
	font-family: var(--g-head); font-weight: 500; font-size: clamp(1.9rem, 1.5rem + 1.3vw, 2.5rem); color: var(--g-navy); line-height: 1;
	box-shadow: 0 4px 10px rgba(28, 43, 61, .10); transition: transform .12s ease, box-shadow .12s ease, border-radius .25s ease, margin .25s ease;
	-webkit-tap-highlight-color: transparent;
}
.sm .dxo-tile:hover { transform: translateY(-2px); box-shadow: 0 7px 14px rgba(28, 43, 61, .14); }
.sm .dxo-tile:focus-visible { outline: 4px solid var(--g-blue); outline-offset: 3px; }
.sm .dxo-tile--aqua { --t-fill: #E2F5F3; --t-edge: #7CCBC4; }
.sm .dxo-tile--coral { --t-fill: #FCE8E3; --t-edge: #F2A08F; }
.sm .dxo-tile--yellow { --t-fill: #FFF6D6; --t-edge: #E0C052; }
.sm .dxo-tile--mint { --t-fill: #E6F4EA; --t-edge: #8FCBA2; }
.sm .dxo-tile--blue { --t-fill: #E2F3F5; --t-edge: #86C4CD; }
.sm .dxo-tile.is-lifted { z-index: 10; cursor: grabbing; box-shadow: 0 16px 28px rgba(28, 43, 61, .25); transition: none; }
.sm .dxo-tile.is-hint { outline: 4px solid #E0C052; outline-offset: 4px; animation: sm-nudge .6s ease-in-out 2; }
@keyframes sm-nudge { 50% { transform: translateY(-6px); } }
.sm .dxo-tile.is-unused { opacity: .35; }

/* Wrong build: the row gives a gentle shake; tiles stay put */
.sm-row.is-wrong { animation: dxg-wiggle .38s ease-in-out; border-color: #F2A08F; }

/* Correct: pieces snap together into one word */
.sm-row.is-joined { gap: 0; border-color: var(--g-aqua); background: #F3FBFA; }
.sm-row.is-joined .dxo-tile { margin: 0; border-radius: 0; border-left-width: 1.5px; border-right-width: 1.5px; cursor: default; box-shadow: none; transform: none; }
.sm-row.is-joined .dxo-tile:first-child { border-radius: 16px 0 0 16px; border-left-width: 3px; }
.sm-row.is-joined .dxo-tile:last-of-type { border-radius: 0 16px 16px 0; border-right-width: 3px; }
.sm-done {
	margin: 0; min-height: 0; font-family: var(--g-head); font-weight: 600; font-size: clamp(2.2rem, 1.7rem + 2.4vw, 3.4rem);
	color: var(--g-blue); letter-spacing: .02em; opacity: 0; transform: scale(.8); height: 0; overflow: hidden;
	transition: opacity .25s ease .15s, transform .3s cubic-bezier(.3, 1.5, .6, 1) .15s;
}
.sm-done.is-on { opacity: 1; transform: none; height: auto; }

.sm-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.sm-build { min-width: 200px; min-height: 54px; font-size: 1.2rem; }
.sm-build:disabled { opacity: .45; cursor: default; }
.sm-msg { margin: 0; min-height: 1.5em; font-family: var(--g-head); font-weight: 500; color: var(--g-blue); text-align: center; }
.sm-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;
}
.sm-streak.is-on { opacity: 1; }

@media (max-width: 599px) {
	.dxg .sm { gap: 10px; padding: 12px 10px; }
	.sm-row { gap: 6px; min-height: 84px; padding: 8px; min-width: 100%; }
	.sm .dxo-slot { width: 80px; height: 60px; }
	.sm .dxo-tile { min-width: 80px; height: 60px; padding: 0 12px; font-size: 1.75rem; border-bottom-width: 6px; }
	.sm-tray { gap: 10px; min-height: 70px; }
	.sm-instr { font-size: 1rem; }
	.sm-skill { display: none; }
	.sm-streak { top: 6px; right: 8px; font-size: 0.85rem; }
}