body{font-family:var(--font-body);text-align:center;background-color:var(--background);margin:0;transition:background-color .3s ease,color .3s ease}#controls{display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacing-sm);margin-bottom:var(--spacing-md);padding:var(--spacing-md);background-color:var(--background);border-radius:var(--border-radius);box-shadow:var(--shadow-sm)}#controls label{margin-right:4px;font-weight:600;color:var(--text)}#controls input[type=number]{width:60px;padding:6px 10px;border:1px solid var(--border-color);border-radius:var(--border-radius);background-color:var(--background);color:var(--text);transition:border-color .2s ease}#controls input[type=number]:focus{outline:none;border-color:var(--primary)}#timer{margin-left:auto;font-weight:700;color:var(--text);padding:6px 12px;background-color:var(--background-alt);border-radius:var(--border-radius)}.game-header{margin-bottom:2em}#moves{font-weight:700;color:var(--text);padding:6px 12px;background-color:var(--background-alt);border-radius:var(--border-radius);margin-left:var(--spacing-sm)}#gameCanvas{border-radius:var(--border-radius);background-color:var(--background-alt);box-shadow:var(--shadow-md)}.popup{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:#000000b3;align-items:center;justify-content:center}.popup-content{background-color:var(--background);margin:auto;padding:var(--spacing-lg);border:1px solid var(--border-color);width:90%;max-width:400px;text-align:center;border-radius:var(--border-radius);box-shadow:var(--shadow-lg);animation:popup-appear .3s ease-out;position:relative}@keyframes popup-appear{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.popup-content h2{color:var(--primary);margin-bottom:var(--spacing-md)}.popup-content p{margin:var(--spacing-md) 0;font-size:1.1rem;color:var(--text)}.close-popup{position:absolute;top:10px;right:15px;font-size:24px;font-weight:700;color:var(--text-muted);cursor:pointer;transition:color .2s ease}.close-popup:hover{color:var(--primary)}#confetti{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:900}@keyframes fall{to{transform:translateY(100vh) rotate(960deg);opacity:0}}#name-input{margin-bottom:var(--spacing-md)}#name-input input{width:100%;padding:10px;border:1px solid var(--border-color);border-radius:var(--border-radius);margin-top:var(--spacing-xs);font-family:var(--font-body);font-size:1rem;background-color:var(--background);color:var(--text)}#name-input input:focus{outline:none;border-color:var(--primary)}.preset-sizes{display:flex;gap:8px;margin-right:var(--spacing-md)}.size-btn{padding:6px 12px;background-color:var(--background-card);border:1px solid var(--border-color);border-radius:var(--border-radius);color:var(--text);cursor:pointer;transition:background-color .2s ease,border-color .2s ease}.size-btn:hover{background-color:var(--background-hover);border-color:var(--primary)}.size-btn.active{background-color:var(--primary);border-color:var(--primary);color:#fff}.custom-size{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-right:var(--spacing-md)}.custom-size p{margin:0;color:var(--text);font-weight:600}@media(max-width:768px){#controls{flex-direction:column;align-items:stretch}.preset-sizes{display:grid;grid-template-columns:repeat(2,1fr);width:100%;margin-right:0;margin-bottom:var(--spacing-sm)}.custom-size{flex-direction:column;align-items:stretch;width:100%;margin-right:0;margin-bottom:var(--spacing-sm)}.custom-size p{text-align:left;margin-bottom:var(--spacing-xs)}#controls input[type=number]{width:100%;margin-right:0;margin-bottom:var(--spacing-sm)}#timer,#moves{margin-left:0;margin-top:var(--spacing-sm);text-align:center;width:100%}#restart{width:100%}#gameCanvas{width:100%;max-width:90vw;height:auto}}.net-page{background:var(--background);color:var(--text)}.net-page .game-container{padding-block:clamp(24px,5vw,52px)}.net-page .game-header{max-width:720px;margin:0 0 28px;padding-left:18px;border-left:4px solid var(--primary);text-align:left}.net-page .game-header h1{margin-bottom:6px;font-size:clamp(2.4rem,7vw,4.8rem);line-height:.9;letter-spacing:-.04em}.net-page .game-header p{color:var(--text-light)}.net-page #controls{background:var(--surface);border:1px solid var(--border-color);border-radius:2px;box-shadow:none}.net-page :is(#timer,#moves){background:var(--background-alt);border:1px solid var(--border-color);border-radius:2px;font-family:var(--font-mono);font-variant-numeric:tabular-nums}.net-page .canvas-container{width:fit-content;max-width:100%;margin:0 auto;padding:10px;overflow:hidden;background:var(--surface);border:1px solid var(--border-color)}.net-page #gameCanvas{display:block;max-width:min(100%,82vh);height:auto;border-radius:1px;box-shadow:none}.net-page :is(.popup-content,.modal-content){background:var(--surface);border:1px solid var(--border-color);border-radius:2px;box-shadow:none}.net-page :is(button,input,canvas):focus-visible{outline:3px solid var(--primary);outline-offset:3px}.net-page :is(.close-modal,.close-popup){padding:0;border:0;background:transparent;line-height:1}.net-page .size-btn{border-radius:2px}@media(max-width:768px){.net-page .game-container{padding-inline:10px}.net-page #gameCanvas{max-width:100%}}