/* Sentence Scramble — word cards laid onto a sentence strip. Builds a thought, not a word. */
.dxg .ss {
	position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: clamp(8px, 1.8vh, 16px); padding: clamp(10px, 2vh, 22px) clamp(10px, 3vw, 32px); overflow-y: auto;
}
.ss-skill { font-family: var(--g-head); font-size: 0.85rem; padding: 3px 12px; border-radius: 999px; background: #FFF5D1; color: #5C4500; }
.ss-instr { margin: 0; font-size: 1.1rem; color: var(--g-navy); text-align: center; }

/* The sentence strip */
.ss-row {
	position: relative; width: min(100%, 900px); min-height: 96px;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 12px 12px;
	padding: 16px 20px 20px; border-radius: 16px; background: #fff;
	border: 2px solid var(--g-border); border-top: 10px solid #9DD3DA;
	background-image: linear-gradient(to top, transparent 13px, #DCE5E6 13px, #DCE5E6 15px, transparent 15px);
	transition: border-color .15s, background-color .15s, gap .3s ease;
}
.ss-row.is-target { border-color: var(--g-aqua); border-top-color: var(--g-aqua); }
.ss .dxo-slot { width: 96px; height: 58px; border-radius: 12px; border: 3px dashed #C9D6D8; flex: 0 0 auto; }
.ss .dxo-insert { width: 5px; height: 56px; border-radius: 3px; background: var(--g-aqua); flex: 0 0 auto; animation: ss-blink .8s ease-in-out infinite alternate; }
@keyframes ss-blink { from { opacity: .45; } to { opacity: 1; } }

/* Word cards: flatter and lighter than syllable blocks */
.ss-tray { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; min-height: 70px; align-items: center; width: min(100%, 900px); }
.ss .dxo-tile {
	position: relative; min-width: 64px; height: 58px; padding: 0 18px; margin: 0; cursor: grab; touch-action: none;
	border-radius: 12px; border: 2px solid #B9C8CA; border-bottom-width: 4px; background: #fff;
	font-family: var(--g-body); font-weight: 700; font-size: clamp(1.45rem, 1.2rem + .8vw, 1.9rem); color: var(--g-navy); line-height: 1;
	box-shadow: 0 3px 8px rgba(28, 43, 61, .08); transition: transform .12s ease, box-shadow .12s ease, border-color .3s ease, background-color .3s ease, padding .3s ease;
	-webkit-tap-highlight-color: transparent;
}
.ss .dxo-tile:hover { transform: translateY(-2px); border-color: var(--g-aqua); box-shadow: 0 6px 12px rgba(28, 43, 61, .12); }
.ss .dxo-tile:focus-visible { outline: 4px solid var(--g-blue); outline-offset: 3px; }
.ss .dxo-tile.is-lifted { z-index: 10; cursor: grabbing; box-shadow: 0 14px 26px rgba(28, 43, 61, .24); border-color: var(--g-aqua); transition: none; }
.ss .dxo-tile.is-hint { outline: 4px solid #E0C052; outline-offset: 4px; animation: ss-nudge .6s ease-in-out 2; }
@keyframes ss-nudge { 50% { transform: translateY(-6px); } }

/* Wrong: the strip gives a gentle shake; words stay where the student put them */
.ss-row.is-wrong { animation: dxg-wiggle .38s ease-in-out; border-color: #F2A08F; }

/* Correct: cards melt into written words on the strip */
.ss-row.is-joined { gap: 12px 4px; border-color: var(--g-aqua); border-top-color: var(--g-aqua); background-color: #F3FBFA; }
.ss-row.is-joined .dxo-tile { border-color: transparent; background: transparent; box-shadow: none; padding: 0 4px; min-width: 0; cursor: default; transform: none; }
.ss-done { text-align: center; opacity: 0; height: 0; overflow: hidden; transition: opacity .3s ease .2s; }
.ss-done.is-on { opacity: 1; height: auto; }
.ss-done__kicker { margin: 0 0 2px; font-family: var(--g-head); color: var(--g-aqua-dark); font-size: 1rem; }
.ss-done__text { margin: 0; font-family: var(--g-body); font-weight: 700; font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem); color: var(--g-blue); }

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

@media (max-width: 599px) {
	.dxg .ss { gap: 8px; padding: 10px 8px; justify-content: flex-start; padding-top: 16px; }
	.ss-row { gap: 8px; padding: 10px 10px 16px; min-height: 76px; border-top-width: 8px; }
	.ss .dxo-slot { width: 64px; height: 46px; }
	.ss .dxo-tile { height: 46px; min-width: 48px; padding: 0 12px; font-size: 1.35rem; border-bottom-width: 3px; }
	.ss-tray { gap: 8px; }
	.ss-instr { font-size: 0.95rem; }
	.ss-skill { display: none; }
	.ss-streak { top: 4px; right: 6px; font-size: 0.8rem; }
	.ss-build { min-width: 180px; }
}