/* Game Lab: Word Search. 12 x 12, lowercase in the reader font, same family and themes 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; }
.lsr { --outline: #26324a; --bar: rgba(255,255,255,.8); --txt: #1c2b3d; --panel: rgba(255,255,255,.92);
	position: relative; overflow: hidden; border-radius: 26px; max-width: 1060px; margin: 0 auto; padding: 0 0 72px; isolation: isolate;
	font-family: var(--dx-font-heading, 'Lexend', system-ui, sans-serif); color: var(--txt); box-shadow: 0 10px 30px rgba(28,43,61,.18); user-select: none; -webkit-user-select: none; }
.lsr--night { --bar: rgba(20,26,50,.6); --txt: #fff; }
.lsr:fullscreen { max-width: none; border-radius: 0; overflow: auto; }
.lsr-scene { position: absolute; inset: 0; z-index: -1; } .lsr-scene svg { width: 100%; height: 100%; display: block; }
.lsr-scene::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.25); } .lsr--night .lsr-scene::after { background: rgba(0,0,0,.05); }
.lsr-top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; padding: .7rem 1rem; margin: .75rem; border-radius: 18px; background: var(--bar); backdrop-filter: blur(4px); }
.lsr-timer { font-size: clamp(1.4rem, 1rem + 1.5vw, 2rem); font-weight: 800; font-variant-numeric: tabular-nums; min-width: 3.2em; }
.lsr-status { text-align: center; font-size: clamp(1rem, .8rem + 1.1vw, 1.55rem); font-weight: 800; }
.lsr-status--warn { color: #c23b3b; } .lsr--night .lsr-status--warn { color: #ffb4a8; } .lsr-status--good { color: #1f7a4a; } .lsr--night .lsr-status--good { color: #9ff0c4; }
.lsr-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; }
.lsr-main { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(.8rem, 2vw, 1.6rem); align-items: start; padding: 0 clamp(.8rem, 2vw, 1.4rem); }
.lsr-gridwrap { position: relative; background: var(--panel); border: 3px solid var(--outline); border-radius: 18px; box-shadow: 0 6px 0 var(--outline); padding: clamp(6px, 1vw, 10px); aspect-ratio: 1; }
.lsr-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(12, 1fr); width: 100%; height: 100%; touch-action: none; }
.lsr-cell { font-family: 'DX Letters', 'Andika', sans-serif; font-weight: 700; font-size: clamp(.95rem, .55rem + 1.3vw, 1.6rem); line-height: 1; color: #1c2b3d; background: none; border: 0; padding: 0; border-radius: 50%; cursor: pointer; }
.lsr-cell:focus-visible { outline: 3px solid #17706f; outline-offset: -2px; }
.lsr-cell.is-sel { background: rgba(242,176,30,.45); }
.lsr-cell.is-anchor { background: #f2b01e; color: #fff; }
.lsr-cell.is-miss { background: rgba(214,69,69,.35); }
.lsr-marks { position: absolute; inset: clamp(6px, 1vw, 10px); z-index: 1; pointer-events: none; }
.lsr-mark { position: absolute; border-radius: 999px; opacity: .8; animation: lsr-draw .35s ease; }
.lsr-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; align-content: start; }
.lsr-word { font-family: 'DX Letters', 'Andika', sans-serif; font-weight: 700; font-size: clamp(1.05rem, .8rem + .9vw, 1.5rem); text-align: center; padding: .5em .4em; border-radius: 14px; border: 3px solid var(--outline); background: #fffaf0; color: #1c2b3d; box-shadow: 0 4px 0 var(--outline); overflow-wrap: anywhere; }
.lsr-word.is-found { background: linear-gradient(180deg, #4fc58a, #2a9a61); color: #fff; border-color: #1f7a4a; box-shadow: 0 4px 0 #1f7a4a; }
.lsr-word.is-found::after { content: " ✓"; }
.lsr-bottom { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; }
.lsr-help { flex: 1; text-align: center; font-size: .9rem; color: #3b4a5c; font-family: var(--dx-font-body, inherit); } .lsr--night .lsr-help { color: #dfe6f3; }
.lsr-ctl { width: 48px; height: 48px; border-radius: 14px; border: 3px solid var(--outline); background: rgba(255,255,255,.92); font-size: 1.35rem; cursor: pointer; box-shadow: 0 3px 0 var(--outline); }
.lsr-ctl:active, .lsr-btn:active { transform: translateY(2px); }
.lsr-ctl:focus-visible, .lsr-btn:focus-visible { outline: 3px solid #fff; box-shadow: 0 0 0 6px #17706f; }
.lsr-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; } .lsr-overlay[hidden] { display: none; }
.lsr-card { background: #fff; color: #1c2b3d; 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: lsr-pop .45s cubic-bezier(.34,1.56,.64,1); }
.lsr-card__kicker { margin: 0; font-size: .82rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #c0475a; }
.lsr-card__title { margin: .3rem 0 .4rem; font-size: 1.6rem; } .lsr-card__text { margin: 0 0 1rem; color: #3b4a5c; font-family: var(--dx-font-body, inherit); }
.lsr-time { font-size: 2.8rem; font-weight: 800; margin: 0 0 .5rem; font-variant-numeric: tabular-nums; }
.lsr-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; }
.lsr-btn--small { font-size: 1rem; margin: 0; padding: .45rem 1.2rem; }
.lsr-initials label { display: block; font-weight: 700; margin-bottom: .35rem; } .lsr-initials > div { display: flex; gap: .5rem; justify-content: center; }
.lsr-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; }
.lsr-initials__note { margin: .4rem 0 0; font-size: .85rem; color: #566273; font-family: var(--dx-font-body, inherit); }
.lsr-lboard__title { margin: 1rem 0 .3rem; font-weight: 800; }
.lsr-lboard { list-style: none; counter-reset: r; margin: 0 auto; padding: 0; max-width: 260px; text-align: left; }
.lsr-lboard li { counter-increment: r; display: flex; gap: .6rem; padding: .25rem .6rem; border-radius: 10px; font-variant-numeric: tabular-nums; }
.lsr-lboard li::before { content: counter(r) "."; width: 1.6em; color: #566273; font-weight: 700; } .lsr-lboard li.is-me { background: #fff4d6; font-weight: 800; }
.lsr-lboard__who { flex: 1; font-weight: 800; letter-spacing: .1em; }
.lsr-confetti { position: absolute; top: 0; z-index: 6; border-radius: 2px; pointer-events: none; }
@keyframes lsr-pop { 0% { transform: scale(.85); } 100% { transform: scale(1); } }
@keyframes lsr-draw { 0% { opacity: 0; } 100% { opacity: .8; } }
@media (max-width: 760px) { .lsr-main { grid-template-columns: 1fr; } .lsr-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; } .lsr-word { font-size: .95rem; padding: .35em .2em; border-width: 2px; box-shadow: 0 3px 0 var(--outline); } .lsr-top { margin: .6rem .5rem; padding: .5rem .7rem; } .lsr-help { font-size: .78rem; } }
@media (prefers-reduced-motion: reduce) { .lsr *, .lsr { animation: none !important; transition: none !important; } }