@font-face { font-family: 'DX Letters'; src: url('../../assets/fonts/dx-letters-bold.woff2') format('woff2'); font-weight: 700; font-display: block; }
/* Game Lab: Match & Remember, new look (sample). */
.lab-themes { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.lab-themes button { font: inherit; font-weight: 700; padding: .5rem 1rem; border-radius: 999px; border: 2px solid var(--dx-border, #dce5e6); background: #fff; cursor: pointer; min-height: 44px; }
.lab-themes button[aria-pressed="true"] { background: var(--dx-aqua, #17706f); border-color: var(--dx-aqua, #17706f); color: #fff; }

.lp {
	--tile-back: #c9c2ea; --tile-back-2: #b8b0e3; --tile-front: #ffcf4d; --ink: #1c2b3d; --outline: #26324a; --txt: #1c2b3d; --bar: rgba(255,255,255,.72);
	position: relative; overflow: hidden; border-radius: 26px; max-width: 900px; margin: 0 auto; min-height: 560px; padding: 0 0 70px;
	font-family: var(--dx-font-heading, 'Lexend', system-ui, sans-serif); color: var(--ink); box-shadow: 0 10px 30px rgba(28,43,61,.18); isolation: isolate;
}
.lp--rainbow { --tile-back: #a9d8c3; --tile-back-2: #93cdb3; --tile-front: #ffd76a; --outline: #1f4a3c; }
.lp--night { --tile-back: #7d6fc0; --tile-back-2: #6b5db3; --tile-front: #ffd76a; --outline: #10162b; --bar: rgba(20,26,50,.6); --txt: #fff; }
.lp.is-full, .lp:fullscreen { position: fixed; inset: 0; max-width: none; border-radius: 0; z-index: 99999; overflow: auto; }
.lp-scene { position: absolute; inset: 0; z-index: -1; }
.lp-scene svg { width: 100%; height: 100%; display: block; }
.lp-scene::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.18); }
.lp--night .lp-scene::after { background: rgba(0,0,0,.05); }

.lp-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); color: var(--txt); }
.lp-timer { font-size: clamp(1.4rem, 1rem + 1.5vw, 2rem); font-weight: 800; font-variant-numeric: tabular-nums; min-width: 3.2em; }
.lp-status { text-align: center; font-size: clamp(1.2rem, .9rem + 1.6vw, 2rem); font-weight: 800; }
.lp-status.is-pop { animation: lp-pop .35s cubic-bezier(.34,1.56,.64,1); }
.lp-count { font-size: clamp(1.1rem, .9rem + 1vw, 1.6rem); font-weight: 800; color: #1f7a4a; background: #e7f6ee; padding: .15rem .7rem; border-radius: 999px; white-space: nowrap; }
.lp--night .lp-count { background: rgba(255,255,255,.15); color: #b9f0cf; }

.lp-board { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(8px, 1.4vw, 16px); padding: .5rem clamp(12px, 3vw, 36px); }
@media (max-width: 640px) { .lp-board { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lp { min-height: 0; } }
.lp-tile {
	position: relative; aspect-ratio: 4 / 3; border: 0; padding: 0; background: none; cursor: pointer; perspective: 700px;
	transform: rotate(var(--r, 0deg)); transition: transform .15s ease, opacity .35s ease;
}
.lp-tile:hover:not(.is-up):not(.is-done) { transform: rotate(var(--r, 0deg)) translateY(-3px) scale(1.03); }
.lp-tile:focus-visible { outline: none; }
.lp-tile:focus-visible .lp-face { box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--dx-aqua, #17706f); }
.lp-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .38s cubic-bezier(.34,1.3,.64,1); }
.lp-tile.is-up .lp-inner { transform: rotateY(180deg); }
.lp-face {
	position: absolute; inset: 0; display: grid; place-items: center; backface-visibility: hidden; -webkit-backface-visibility: hidden;
	border: 3px solid var(--outline); border-radius: var(--br, 14px); box-shadow: 0 5px 0 var(--outline), 0 8px 14px rgba(0,0,0,.18);
}
.lp-back { background: linear-gradient(160deg, var(--tile-back) 0%, var(--tile-back-2) 100%); }
.lp-back::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(135deg, rgba(255,255,255,.14) 0 10px, rgba(255,255,255,0) 10px 22px); }
.lp-num { position: relative; font-size: clamp(1rem, .8rem + 1vw, 1.5rem); font-weight: 700; color: var(--outline); opacity: .75; }
.lp--night .lp-num { color: #fff; }
.lp-front { background: linear-gradient(160deg, #ffe08a 0%, var(--tile-front) 100%); transform: rotateY(180deg); }
.lp-word { font-family: 'DX Letters', 'Andika', var(--dx-font-heading, sans-serif); font-size: clamp(1.25rem, .9rem + 1.8vw, 2.2rem); font-weight: 700; color: #1c2b3d; letter-spacing: .01em; }
.lp-tile.is-wiggle { animation: lp-wiggle .45s ease; }
.lp-tile.is-done { animation: lp-vanish .45s ease forwards; pointer-events: none; }

.lp-stamp { position: absolute; top: -14%; right: -8%; width: 46%; aspect-ratio: 1; z-index: 3; pointer-events: none; opacity: 0;
	background: #fff; border-radius: 50%; border: 3px solid var(--outline); box-shadow: 0 3px 0 var(--outline); padding: 8%; }   /* corner badge: the word stays readable */
.lp-stamp.is-on { opacity: 1; animation: lp-stamp .35s cubic-bezier(.34,1.8,.64,1); }
.lp-stamp svg { width: 100%; height: 100%; overflow: visible; }
.lp-stamp path { fill: none; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 90; stroke-dashoffset: 90; animation: lp-draw .35s ease forwards .05s; filter: drop-shadow(0 0 0 #fff) drop-shadow(0 2px 0 rgba(255,255,255,.9)); }
.lp-stamp.is-ok path { stroke: #1f8a4c; } .lp-stamp.is-no path { stroke: #c23b3b; }

.lp-bottom { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; }
.lp-spacer { flex: 1; }
.lp-ctl { width: 48px; height: 48px; border-radius: 14px; border: 3px solid var(--outline); background: rgba(255,255,255,.9); font-size: 1.35rem; cursor: pointer; box-shadow: 0 3px 0 var(--outline); }
.lp-ctl:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--outline); }
.lp-ctl:focus-visible, .lp-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px var(--dx-aqua, #17706f); }

.lp-overlay { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(28,43,61,.28); backdrop-filter: blur(2px); padding: 1rem; }
.lp-overlay[hidden] { display: none; }
.lp-card { background: #fff; border: 4px solid var(--outline); border-radius: 26px; box-shadow: 0 8px 0 var(--outline), 0 18px 40px rgba(0,0,0,.25); padding: 1.6rem 2rem; text-align: center; max-width: 420px; animation: lp-pop .45s cubic-bezier(.34,1.56,.64,1); }
.lp-card__kicker { margin: 0; font-size: .85rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #c0475a; }
.lp-card__title { margin: .35rem 0 .5rem; font-size: 1.6rem; color: #1c2b3d; }
.lp-card__text { margin: 0 0 1rem; color: #3b4a5c; font-family: var(--dx-font-body, inherit); }
.lp-card__stats { display: flex; justify-content: center; gap: 1.25rem; font-weight: 700; margin: 0 0 1rem; color: #1c2b3d; }
.lp-stars { font-size: 2.6rem; margin: 0; color: #f2b01e; letter-spacing: .1em; text-shadow: 0 3px 0 #c98e0b; } .lp-stars span { color: #d9dee2; text-shadow: none; }
.lp-btn { font: inherit; font-weight: 800; font-size: 1.25rem; padding: .7rem 2.2rem; border-radius: 999px; border: 3px solid var(--outline); background: #2fa36b; color: #fff; cursor: pointer; box-shadow: 0 5px 0 #1f6f48; }
.lp-btn:hover { background: #29925f; } .lp-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #1f6f48; }
.lp-confetti { position: absolute; top: 0; z-index: 6; border-radius: 2px; pointer-events: none; }

@keyframes lp-pop { 0% { transform: scale(.85); } 100% { transform: scale(1); } }
@keyframes lp-wiggle { 0%, 100% { transform: rotate(var(--r)); } 20% { transform: rotate(calc(var(--r) - 5deg)); } 40% { transform: rotate(calc(var(--r) + 5deg)); } 60% { transform: rotate(calc(var(--r) - 3deg)); } 80% { transform: rotate(calc(var(--r) + 2deg)); } }
@keyframes lp-vanish { 0% { transform: rotate(var(--r)) scale(1); opacity: 1; } 35% { transform: rotate(var(--r)) scale(1.12); opacity: 1; } 100% { transform: rotate(var(--r)) scale(.2); opacity: 0; } }
@keyframes lp-stamp { 0% { transform: scale(2.2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes lp-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .lp *, .lp { animation: none !important; transition: none !important; } .lp-stamp path { stroke-dashoffset: 0; } }

.lab-set-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 .8rem; font-weight: 700; }
.lab-set { font: inherit; font-weight: 600; padding: .55rem .8rem; border-radius: 12px; border: 2px solid var(--dx-border, #dce5e6); background: #fff; min-height: 44px; max-width: 100%; }
.lp-board.lp-board--small { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 720px; margin: 0 auto; }
@media (max-width: 640px) { .lp-board.lp-board--small { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.lp-word--long { font-size: clamp(.95rem, .7rem + 1.1vw, 1.5rem); }
.lp-word--xlong { font-size: clamp(.78rem, .6rem + .85vw, 1.2rem); letter-spacing: 0; }
.lp-front { padding: 0 4px; } .lp-word { white-space: nowrap; text-align: center; line-height: 1.1; }   /* words never break */
.lp-board.lp-board--wide { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.lp-board.lp-board--xwide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 640px) { .lp-board.lp-board--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lp-board.lp-board--xwide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.lp-word--pic { display: grid; place-items: center; width: 100%; height: 100%; }
.lp-pic { width: 78%; height: 78%; max-width: 92px; max-height: 92px; }