:root{color-scheme:dark;--yellow:#e5ed4b;--cream:#fbf8e7;--dark:#12140d;--panel:#202318;--line:#555b2b}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--dark);color:var(--cream);font-family:Segoe UI,system-ui,sans-serif}main{width:min(1200px,92vw);margin:auto;padding:clamp(1.2rem,4vw,3rem) 0}header{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:2rem;margin-bottom:2rem}header>a{align-self:start;color:#c9c8a9;text-decoration:none}header p{margin:0;color:var(--yellow);font-weight:800;letter-spacing:.18em;font-size:.72rem}h1{font:700 clamp(3rem,7vw,6rem)/1 Georgia;margin:.25rem 0 0}.controls{justify-self:end;display:flex;align-items:end;gap:.7rem}.controls label{display:grid;gap:.25rem;color:#c9c8a9;font-size:.8rem}select,button{border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--cream);padding:.7rem .85rem;font:inherit}button{cursor:pointer;font-weight:700}.game{width:min(78vh,720px);margin:auto}.score{display:flex;justify-content:space-between;gap:1rem;color:#c9c8a9;margin-bottom:.8rem}.score strong{color:var(--yellow);white-space:nowrap}.board{--size:2;display:grid;grid-template-columns:repeat(var(--size),1fr);grid-template-rows:repeat(var(--size),1fr);gap:8px;aspect-ratio:1;padding:10px;border:1px solid var(--line);border-radius:22px;background:#292c16;box-shadow:0 30px 80px #0009}.piece{position:relative;border:0;border-radius:12px;min-width:0;background-color:#cad240;background-image:radial-gradient(circle at 56% 18%,transparent 0 27px,#f7ff8e 28px 37px,transparent 38px),radial-gradient(circle at 45% 25%,transparent 0 42px,#f7ff8e 43px 53px,transparent 54px),radial-gradient(circle at 68% 29%,transparent 0 60px,#f7ff8e 61px 72px,transparent 73px),repeating-linear-gradient(135deg,#fff2 0 1px,transparent 1px 4px),linear-gradient(#e7ed63 0 58%,#c4cc3e 58% 100%);background-size:calc(var(--size)*100%) calc(var(--size)*100%);background-position:calc(var(--col)*100%/(var(--size) - 1)) calc(var(--row)*100%/(var(--size) - 1));box-shadow:inset 0 0 0 1px #ffffae66,0 5px 10px #0005;transition:transform .15s}.piece:hover,.piece:focus-visible{transform:scale(.97);outline:2px solid white}.piece:after{content:attr(data-number);position:absolute;right:9px;bottom:5px;color:white;font-weight:900;text-shadow:0 1px 5px #585e00}.empty{border-radius:12px;background:#0b0c08;box-shadow:inset 0 0 20px #000}.board.won{animation:win .65s ease}@keyframes win{50%{transform:scale(1.025);filter:brightness(1.35)}}@media(max-width:760px){header{grid-template-columns:1fr;align-items:start;text-align:center}header>a{justify-self:start}.controls{justify-self:center;flex-wrap:wrap;justify-content:center}.game{width:min(88vw,62vh)}.score{font-size:.85rem}}@media(prefers-reduced-motion:reduce){.piece{transition:none}.board.won{animation:none}}