.play__inner{display:grid;gap:var(--sp-6)}.play__layout{display:grid;gap:var(--sp-6);align-items:start}@media(min-width:820px){.play__layout{grid-template-columns:minmax(0,1fr) 280px;gap:var(--sp-7)}}.play__board{--gap: 4px;position:relative;width:min(100%,440px);aspect-ratio:862.67 / 994.67;margin-inline:auto;padding:var(--gap);border-radius:var(--r-md);background:var(--petrol-950);border:1px solid var(--petrol-800);outline-offset:4px}.play__tile{position:absolute;width:calc(100% / var(--n));height:calc(100% / var(--n));padding:var(--gap);cursor:pointer;transition:left var(--dur-fast) var(--ease-out),top var(--dur-fast) var(--ease-out)}.play__board--3{--n: 3}.play__board--4{--n: 4}.play__tile svg{width:100%;height:100%;border-radius:var(--r-sm);background:var(--petrol-900);border:1px solid var(--petrol-800);transition:border-color var(--dur-fast) var(--ease-soft),background-color var(--dur-fast) var(--ease-soft)}.play__tile svg path{fill:var(--amber-500)}.play__tile:hover svg,.play__tile:focus-visible svg{border-color:var(--amber-500);background:var(--petrol-850)}.play__tile-num{position:absolute;inset-inline-end:10px;inset-block-start:8px;font-size:.65rem;color:var(--petrol-300);opacity:.7}.play__board.is-solved .play__tile{pointer-events:none}.play__board.is-solved .play__tile-num{opacity:0}.play__win{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:6%;background:var(--petrol-950);border-radius:var(--r-md);animation:play-win-in var(--dur-mid) var(--ease-soft) both}.play__win .mark__svg{width:100%;height:auto;overflow:visible}@keyframes play-win-in{0%{opacity:0}to{opacity:1}}.play__panel{display:grid;gap:var(--sp-5)}.play__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3)}.play__stats dt{font-size:var(--fs-xs);color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em;font-weight:600}.play__stats dd{margin:var(--sp-1) 0 0;font-size:1.35rem;color:var(--ink-1)}.play__sizes{display:flex;gap:var(--sp-2)}.play__status{color:var(--ink-2);font-size:var(--fs-sm);min-height:2.6em}@media(prefers-reduced-motion:reduce){.play__tile{transition:none}}.play__tabs{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:calc(-1 * var(--sp-4))}.play__tab{padding:.55rem 1rem;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface-1);color:var(--ink-2);font-size:var(--fs-sm);font-weight:600;transition:color var(--dur-fast) var(--ease-soft),border-color var(--dur-fast) var(--ease-soft),background-color var(--dur-fast) var(--ease-soft)}.play__tab:hover{color:var(--ink-1);border-color:var(--line-strong)}.play__tab.is-active{background:var(--brand-fill);border-color:var(--brand-fill);color:var(--brand-ink)}.play__game{display:grid;gap:var(--sp-5)}.play__lead{color:var(--ink-2);max-width:60ch}.play__grid{--n: 4;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:6px;width:min(100%,440px);margin-inline:auto;padding:6px;border-radius:var(--r-md);background:var(--petrol-950);border:1px solid var(--petrol-800)}.play__grid--3{--n: 3}.play__grid--4{--n: 4}.play__grid--5{--n: 5}.play__cell{aspect-ratio:1;display:grid;place-items:center;padding:14%;border-radius:var(--r-sm);background:var(--petrol-900);border:1px solid var(--petrol-800);transition:border-color var(--dur-fast) var(--ease-soft),background-color var(--dur-fast) var(--ease-soft),transform var(--dur-fast) var(--ease-out)}.play__cell svg{width:100%;height:auto;transition:transform var(--dur-fast) var(--ease-soft)}.play__cell svg path{fill:var(--amber-500)}.play__cell:hover:not(:disabled),.play__cell:focus-visible{border-color:var(--amber-500);background:var(--petrol-850)}.play__cell:disabled{cursor:default}.play__cell.is-mirror svg{transform:scaleX(-1)}.play__cell.is-flip svg{transform:rotate(180deg)}.play__cell.is-shade svg path{fill:var(--amber-300)}.play__cell.is-small svg{transform:scale(.84)}.play__cell.is-wrong{border-color:var(--danger, #F27D8D);animation:play-shake .4s var(--ease-soft)}.play__grid.is-done .play__cell svg{transform:none}.play__grid.is-done .play__cell svg path{fill:var(--amber-500)}@keyframes play-shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.play__lamp svg path{fill:var(--petrol-700);transition:fill .12s var(--ease-soft)}.play__lamp.is-lit svg path{fill:var(--amber-500)}.play__lamp.is-lit{border-color:var(--amber-500)}.play__card{aspect-ratio:862.67 / 994.67;perspective:800px;border-radius:var(--r-sm)}.play__card-inner{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .36s var(--ease-out)}.play__card.is-up .play__card-inner{transform:rotateY(180deg)}.play__card-back,.play__card-face{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;border-radius:var(--r-sm);backface-visibility:hidden;border:1px solid var(--petrol-800)}.play__card-back{background:var(--petrol-900);padding:22%}.play__card-back svg{width:100%;height:auto}.play__card-back svg path{fill:var(--petrol-700)}.play__card-face{background:var(--petrol-900);transform:rotateY(180deg);overflow:hidden}.play__card-face svg{width:100%;height:100%}.play__card-face svg path{fill:var(--amber-500)}.play__card:hover:not(.is-up) .play__card-back,.play__card:focus-visible .play__card-back{border-color:var(--amber-500)}.play__card.is-matched .play__card-face{border-color:var(--amber-500)}@media(prefers-reduced-motion:reduce){.play__card-inner{transition:none}.play__cell.is-wrong{animation:none}}