/* Game Lab: Word Maze. Four stages, each with its own background and colors. */
@font-face { font-family: 'DX Letters'; src: url('../../assets/fonts/dx-letters-bold.woff2') format('woff2'); font-weight: 700; font-display: block; }
.lz { --wall: #3aa6a0; --wall-edge: #1b7f7a; --path: rgba(255,255,255,.55); --room: #fffaf0; --room-edge: #e3a02a; --puff1: #f4b3a8; --puff2: #cdbdef; --bar: rgba(255,255,255,.82); --txt: #1c2b3d;
	position: relative; overflow: hidden; border-radius: 26px; max-width: 1000px; 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; transition: background .6s; }
.lz--rainbow { --wall: #b9a3ea; --wall-edge: #8c74cf; --room-edge: #f2a7c0; --puff1: #afcdef; --puff2: #f6d878; }
.lz--night { --wall: #33406a; --wall-edge: #f6d878; --path: rgba(255,255,255,.08); --room: #fffaf0; --room-edge: #f6d878; --puff1: #cdbdef; --puff2: #a9d8c3; --bar: rgba(20,26,50,.6); --txt: #fff; }
.lz--meadow { --wall: #6dbb7d; --wall-edge: #4c9a5d; --room-edge: #f4b3a8; --puff1: #ffffff; --puff2: #afcdef; }
.lz:fullscreen { max-width: none; border-radius: 0; }
.lz-scene { position: absolute; inset: 0; z-index: -1; } .lz-scene svg { width: 100%; height: 100%; display: block; }
.lz-scene::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.2); } .lz--night .lz-scene::after { background: none; }
.lz-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); }
.lz-timer { font-size: clamp(1.4rem, 1rem + 1.5vw, 2rem); font-weight: 800; font-variant-numeric: tabular-nums; min-width: 3.2em; }
.lz-status { text-align: center; font-size: clamp(.95rem, .8rem + .8vw, 1.3rem); font-weight: 800; }
.lz-status--warn { color: #c23b3b; } .lz--night .lz-status--warn { color: #ffb4a8; } .lz-status--good { color: #1f7a4a; } .lz--night .lz-status--good { color: #9ff0c4; }
.lz-count { font-size: clamp(.85rem, .75rem + .6vw, 1.1rem); font-weight: 800; color: #1f7a4a; background: #e7f6ee; padding: .2rem .7rem; border-radius: 999px; white-space: nowrap; }
/* the maze */
.lz-board { position: relative; display: grid; grid-template-columns: repeat(var(--w), 1fr); grid-template-rows: repeat(var(--h), 1fr); aspect-ratio: 19 / 11;
	margin: 0 clamp(.5rem, 2vw, 1.4rem); padding: 0; border-radius: 18px; background: var(--path); box-shadow: inset 0 0 0 3px var(--wall-edge); overflow: hidden; touch-action: none; }
.lz-wall { background: var(--wall); box-shadow: inset 0 -3px 0 var(--wall-edge); }
.lz-pad { position: relative; display: grid; place-items: center; margin: 2px; border-radius: 12px; background: var(--room); border: 3px solid var(--room-edge); box-shadow: 0 3px 0 var(--room-edge); overflow: visible; transition: background .3s; }
.lz-pad__word { font-family: 'DX Letters', 'Andika', sans-serif; font-weight: 700; font-size: clamp(.95rem, .6rem + 1.4vw, 1.7rem); color: #1c2b3d; white-space: nowrap; line-height: 1; }
.lz-pad.is-right { background: #bfeccf; border-color: #2fa36b; box-shadow: 0 3px 0 #1f7a4a; }
.lz-pad.is-wrong { background: #ffd9d4; border-color: #d64545; box-shadow: 0 3px 0 #a52f2f; }
.lz-mark { position: absolute; top: -12px; right: -8px; z-index: 4; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 3px solid #fff; color: #fff; font-size: 1.1rem; font-weight: 900; box-shadow: 0 3px 8px rgba(0,0,0,.3); animation: lz-pop .4s cubic-bezier(.34,1.56,.64,1); }
.lz-mark--right { background: #2fa36b; } .lz-mark--wrong { background: #d64545; }
.lz-me, .lz-puff { position: absolute; width: calc(100% / 19); height: calc(100% / 11); display: flex; align-items: center; justify-content: center; transition: left .19s linear, top .19s linear; z-index: 3; pointer-events: none; }
.lz-me svg { width: 200%; height: 200%; max-width: none; max-height: none; flex: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.2)); transition: transform .15s; }
.lz-me[data-dir="left"] svg { transform: scaleX(-1); }
.lz-me.is-jump { transition: none; }
.lz-me.is-bumped svg { animation: lz-wobble .5s ease; }
.lz-puff { z-index: 2; transition: left .38s ease-in-out, top .38s ease-in-out; }
.lz-puff svg { width: 175%; height: 175%; max-width: none; max-height: none; flex: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.18)); animation: lz-bob 1.6s ease-in-out infinite; }
.lz-puff--0 { color: var(--puff1); } .lz-puff--1 { color: var(--puff2); }
/* the question */
.lz-question { margin: .7rem auto 0; width: fit-content; max-width: 92%; padding: .5rem 1.2rem; border-radius: 999px; background: #26324a; color: #fff; font-weight: 800; font-size: clamp(1rem, .8rem + 1vw, 1.5rem); text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
/* on-screen arrows (tablets and phones) */
.lz-dpad { display: none; grid-template-columns: repeat(3, 56px); grid-template-rows: repeat(2, 52px); gap: 6px; justify-content: center; margin: .6rem auto 0; }
.lz-arrow { font-size: 1.3rem; border-radius: 14px; border: 3px solid #26324a; background: rgba(255,255,255,.95); color: #26324a; box-shadow: 0 4px 0 #26324a; cursor: pointer; touch-action: none; }
.lz-arrow:active { transform: translateY(2px); box-shadow: 0 2px 0 #26324a; }
.lz-arrow--up { grid-column: 2; grid-row: 1; } .lz-arrow--left { grid-column: 1; grid-row: 2; } .lz-arrow--down { grid-column: 2; grid-row: 2; } .lz-arrow--right { grid-column: 3; grid-row: 2; }
@media (pointer: coarse), (max-width: 760px) { .lz-dpad { display: grid; } }
.lz-bottom { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; } .lz-spacer { flex: 1; }
.lz-ctl { width: 48px; height: 48px; border-radius: 14px; border: 3px solid #26324a; background: rgba(255,255,255,.92); font-size: 1.35rem; cursor: pointer; box-shadow: 0 3px 0 #26324a; }
.lz-ctl:active, .lz-btn:active { transform: translateY(2px); }
.lz-ctl:focus-visible, .lz-btn:focus-visible, .lz-arrow:focus-visible { outline: 3px solid #fff; box-shadow: 0 0 0 6px #17706f; }
.lz-overlay { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; background: rgba(28,43,61,.3); backdrop-filter: blur(2px); padding: 1rem; overflow: auto; } .lz-overlay[hidden] { display: none; }
.lz-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: 460px; width: 100%; animation: lz-pop .45s cubic-bezier(.34,1.56,.64,1); }
.lz-card__kicker { margin: 0; font-size: .82rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #c0475a; }
.lz-card__title { margin: .3rem 0 .3rem; font-size: 1.45rem; } .lz-card__goal { margin: 0 0 .5rem; font-weight: 800; color: #17706f; } .lz-card__text { margin: 0 0 .6rem; color: #3b4a5c; font-family: var(--dx-font-body, inherit); }
.lz-card__keys { margin: 0; font-size: .9rem; color: #566273; }
.lz-stars { margin: .2rem 0 0; font-size: 2.2rem; color: #f2b01e; letter-spacing: .1em; }
.lz-time { font-size: 2.2rem; font-weight: 800; margin: 0 0 .5rem; font-variant-numeric: tabular-nums; }
.lz-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; }
.lz-btn--small { font-size: 1rem; margin: 0; padding: .45rem 1.2rem; }
.lz-initials label { display: block; font-weight: 700; margin-bottom: .35rem; } .lz-initials > div { display: flex; gap: .5rem; justify-content: center; }
.lz-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; }
.lz-initials__note { margin: .4rem 0 0; font-size: .85rem; color: #566273; font-family: var(--dx-font-body, inherit); }
.lz-lboard__title { margin: 1rem 0 .3rem; font-weight: 800; }
.lz-lboard { list-style: none; counter-reset: r; margin: 0 auto; padding: 0; max-width: 280px; text-align: left; }
.lz-lboard li { counter-increment: r; display: flex; gap: .6rem; padding: .25rem .6rem; border-radius: 10px; font-variant-numeric: tabular-nums; }
.lz-lboard li::before { content: counter(r) "."; width: 1.6em; color: #566273; font-weight: 700; } .lz-lboard li.is-me { background: #fff4d6; font-weight: 800; }
.lz-lboard__who { flex: 1; font-weight: 800; letter-spacing: .1em; } .lz-lboard__score { min-width: 3em; text-align: right; color: #c23b3b; font-weight: 800; }
.lz-confetti { position: absolute; top: 0; z-index: 7; border-radius: 2px; pointer-events: none; }
@keyframes lz-pop { 0% { transform: scale(.6); } 100% { transform: scale(1); } }
@keyframes lz-bob { 50% { transform: translateY(-6%); } }
@keyframes lz-wobble { 25% { transform: rotate(-15deg); } 75% { transform: rotate(15deg); } }
@media (max-width: 640px) { .lz-top { margin: .6rem .5rem; padding: .5rem .7rem; grid-template-columns: auto 1fr; } .lz-count { grid-column: 1 / -1; justify-self: center; } .lz-board { margin: 0 .3rem; border-radius: 12px; } .lz-pad { margin: 1px; border-width: 2px; border-radius: 8px; } .lz-mark { width: 26px; height: 26px; font-size: .9rem; } }
@media (prefers-reduced-motion: reduce) { .lz *, .lz { animation: none !important; transition: none !important; } }