/* Game Lab: Sentence Scramble. Notebook paper, chunky word cards, same family as the memory game. */
@font-face { font-family: 'DX Letters'; src: url('../../assets/fonts/dx-letters-bold.woff2') format('woff2'); font-weight: 700; font-display: block; }
.ls { --outline: #26324a; position: relative; max-width: 1000px; margin: 0 auto; border-radius: 26px; overflow: hidden; isolation: isolate; min-height: 520px;
	padding: 0 0 72px; font-family: var(--dx-font-heading, 'Lexend', system-ui, sans-serif); color: #1c2b3d; border: 8px solid #cfe9df;
	background: #fffdf7; box-shadow: inset 0 0 0 2px #fff, 0 10px 30px rgba(28,43,61,.12); }
.ls:fullscreen { max-width: none; border-radius: 0; }
.ls::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: linear-gradient(90deg, #f4b3a8, #f8c9a8, #f6d878, #a9d8c3, #afcdef, #cdbdef); z-index: 1; }
.ls-top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; padding: .7rem 1rem; margin: 1rem .9rem 0; border-radius: 18px; background: rgba(255,255,255,.9); box-shadow: 0 2px 8px rgba(28,43,61,.06); position: relative; z-index: 2; }
.ls-timer { font-size: clamp(1.4rem, 1rem + 1.5vw, 2rem); font-weight: 800; font-variant-numeric: tabular-nums; min-width: 3.2em; }
.ls-status { text-align: center; font-size: clamp(1.1rem, .8rem + 1.3vw, 1.7rem); font-weight: 800; }
.ls-status--good { color: #1f7a4a; }
.ls-count { font-size: clamp(1rem, .9rem + .8vw, 1.4rem); font-weight: 800; color: #1f7a4a; background: #e7f6ee; padding: .15rem .7rem; border-radius: 999px; white-space: nowrap; }
.ls-paper { position: relative; margin: 1rem clamp(.8rem, 3vw, 2.2rem) 0; min-height: 300px; display: flex; flex-direction: column; justify-content: center; padding: 2rem clamp(1rem, 4vw, 3rem) 1rem clamp(2.2rem, 6vw, 4.5rem);
	background: repeating-linear-gradient(180deg, transparent 0 58px, #c9dcef 58px 60px), #fff; border-radius: 16px; box-shadow: 0 2px 10px rgba(28,43,61,.08); }
.ls-paper::before { content: ""; position: absolute; top: 0; bottom: 0; left: clamp(1.4rem, 4vw, 3rem); width: 2px; background: #f4b3a8; }
.ls-row { display: flex; flex-wrap: wrap; gap: clamp(10px, 1.6vw, 18px); justify-content: center; align-items: center; min-height: 90px; }
.ls-word { font-family: 'DX Letters', 'Andika', var(--dx-font-heading, sans-serif); font-weight: 700; font-size: clamp(1.4rem, 1rem + 2vw, 2.5rem); line-height: 1.1; color: #1c2b3d;
	padding: .45em .7em .5em; border-radius: 16px 14px 17px 13px; border: 3px solid var(--outline, #26324a); background: linear-gradient(180deg, #fff 0%, #fff6d9 100%);
	box-shadow: 0 5px 0 #26324a, 0 8px 14px rgba(0,0,0,.14); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; transform: rotate(var(--r, 0deg)); transition: transform .12s ease, background .2s ease; }
.ls-word:hover { transform: rotate(var(--r, 0deg)) translateY(-3px); }
.ls-word:focus-visible { outline: 3px solid #fff; box-shadow: 0 0 0 6px #17706f, 0 5px 0 #26324a; }
.ls-word.is-selected { background: linear-gradient(180deg, #fff 0%, #ffe08a 100%); transform: rotate(0) translateY(-6px); }
.ls-word.is-dragging { position: fixed; z-index: 99999; cursor: grabbing; transform: rotate(-2deg) scale(1.08); pointer-events: none; box-shadow: 0 10px 0 #26324a, 0 18px 30px rgba(0,0,0,.25); }
.ls-word.is-right { background: linear-gradient(180deg, #e9fbf1 0%, #bfeccf 100%); border-color: #1f7a4a; box-shadow: 0 5px 0 #1f7a4a; }
.ls-holder { display: inline-block; border-radius: 16px; border: 3px dashed #9fb4c9; background: rgba(175,205,239,.18); }
.ls-help { text-align: center; margin: 1.4rem 0 0; color: #566273; font-family: var(--dx-font-body, inherit); font-size: .95rem; }
.ls-bottom { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; }
.ls-spacer { flex: 1; }
.ls-ctl { width: 48px; height: 48px; border-radius: 14px; border: 3px solid #26324a; background: #fff; font-size: 1.35rem; cursor: pointer; box-shadow: 0 3px 0 #26324a; }
.ls-ctl:active, .ls-btn:active { transform: translateY(2px); }
.ls-ctl:focus-visible, .ls-btn:focus-visible { outline: 3px solid #fff; box-shadow: 0 0 0 6px #17706f; }
.ls-overlay { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(28,43,61,.3); backdrop-filter: blur(2px); padding: 1rem; overflow: auto; }
.ls-overlay[hidden] { display: none; }
.ls-card { background: #fff; border: 4px solid #26324a; border-radius: 26px; box-shadow: 0 8px 0 #26324a, 0 18px 40px rgba(0,0,0,.25); padding: 1.4rem 1.8rem; text-align: center; max-width: 440px; width: 100%; animation: ls-pop .45s cubic-bezier(.34,1.56,.64,1); }
.ls-card__kicker { margin: 0; font-size: .82rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #c0475a; }
.ls-card__title { margin: .3rem 0 .4rem; font-size: 1.6rem; color: #1c2b3d; }
.ls-card__text { margin: 0 0 1rem; color: #3b4a5c; font-family: var(--dx-font-body, inherit); }
.ls-time { font-size: 2.8rem; font-weight: 800; margin: 0 0 .5rem; font-variant-numeric: tabular-nums; }
.ls-btn { font: inherit; font-weight: 800; font-size: 1.25rem; margin-top: 1rem; padding: .7rem 2.4rem; border-radius: 999px; border: 3px solid #26324a; background: #2fa36b; color: #fff; cursor: pointer; box-shadow: 0 5px 0 #1f6f48; }
.ls-btn--small { font-size: 1rem; margin: 0; padding: .45rem 1.2rem; }
.ls-initials label { display: block; font-weight: 700; margin-bottom: .35rem; }
.ls-initials > div { display: flex; gap: .5rem; justify-content: center; }
.ls-initials input { font: inherit; font-weight: 800; font-size: 1.3rem; width: 5.5em; text-align: center; text-transform: uppercase; letter-spacing: .15em; padding: .35rem .5rem; border: 3px solid #26324a; border-radius: 12px; }
.ls-initials__note { margin: .4rem 0 0; font-size: .85rem; color: #566273; font-family: var(--dx-font-body, inherit); }
.ls-board__title { margin: 1rem 0 .3rem; font-weight: 800; }
.ls-board { list-style: none; counter-reset: r; margin: 0 auto; padding: 0; max-width: 260px; text-align: left; }
.ls-board li { counter-increment: r; display: flex; gap: .6rem; padding: .25rem .6rem; border-radius: 10px; font-variant-numeric: tabular-nums; }
.ls-board li::before { content: counter(r) "."; width: 1.6em; color: #566273; font-weight: 700; }
.ls-board li.is-me { background: #fff4d6; font-weight: 800; }
.ls-board__who { flex: 1; font-weight: 800; letter-spacing: .1em; } 
.ls-confetti { position: absolute; top: 0; z-index: 6; border-radius: 2px; pointer-events: none; }
@keyframes ls-pop { 0% { transform: scale(.85); } 100% { transform: scale(1); } }
@media (max-width: 640px) { .ls { border-width: 6px; min-height: 0; } .ls-top { margin: .8rem .5rem 0; padding: .5rem .7rem; } .ls-paper { margin: .8rem .5rem 0; padding: 1.4rem .8rem .8rem 1.8rem; background: repeating-linear-gradient(180deg, transparent 0 48px, #c9dcef 48px 50px), #fff; } .ls-paper::before { left: 1.1rem; } }
@media (prefers-reduced-motion: reduce) { .ls *, .ls { animation: none !important; transition: none !important; } }

/* Syllable Scramble: when the word is right, the syllable cards slide together and the whole word appears */
.ls-row.is-joined { gap: 0; transition: gap .35s ease; }
.ls-row.is-joined .ls-word { border-radius: 0; transform: none; }
.ls-row.is-joined .ls-word:first-child { border-radius: 16px 0 0 16px; }
.ls-row.is-joined .ls-word:last-child { border-radius: 0 16px 16px 0; }
.ls-row.is-joined .ls-word + .ls-word { border-left-width: 1px; border-left-style: dashed; }
.ls-word-built { min-height: 1.4em; margin: .9rem 0 0; text-align: center; font-family: 'DX Letters', 'Andika', sans-serif; font-weight: 700; font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem); color: #1f7a4a; }