*{margin:0;padding:0;box-sizing:border-box}
:root{
--bg:#0a0e17;--bg2:#111827;--bg3:#1a2235;
--text:#e8e6e1;--text2:#9ca3af;--text3:#6b7280;
--accent:#f59e0b;--accent2:#d97706;--accent3:#92400e;
--blue:#3b82f6;--blue2:#1d4ed8;
--red:#ef4444;--green:#22c55e;
--border:rgba(255,255,255,0.06);
--cell:rgba(255,255,255,0.03);--cell-hover:rgba(255,255,255,0.07);
--cell-selected:rgba(245,158,11,0.15);--cell-highlight:rgba(59,130,246,0.08);
--cell-knight:rgba(239,68,68,0.08);
--font-display:'DM Serif Display',serif;--font-body:'Outfit',sans-serif;
}
html{font-size:16px}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);min-height:100vh;overflow-x:hidden}

.grain{position:fixed;inset:0;pointer-events:none;opacity:.03;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

nav.topnav{max-width:1000px;margin:0 auto;padding:1rem 1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
nav.topnav .brand{font-family:var(--font-display);font-size:1.3rem;color:var(--text);text-decoration:none;letter-spacing:-.01em}
nav.topnav .brand span{color:var(--accent)}
nav.topnav ul{display:flex;gap:1.5rem;list-style:none;flex-wrap:wrap}
nav.topnav a{color:var(--text2);text-decoration:none;font-size:.85rem;transition:color .2s}
nav.topnav a:hover{color:var(--accent)}
nav.topnav a.active{color:var(--accent)}

header{text-align:center;padding:1.5rem 1rem 1rem;position:relative}
header::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:300px;height:300px;background:radial-gradient(circle,rgba(245,158,11,0.08) 0%,transparent 70%);pointer-events:none}
.logo{font-family:var(--font-display);font-size:2.4rem;color:var(--text);letter-spacing:-.02em;line-height:1.1}
.logo span{color:var(--accent)}
.tagline{color:var(--text2);font-size:.9rem;margin-top:.4rem;font-weight:300;letter-spacing:.03em}

.controls{display:flex;justify-content:center;gap:.5rem;margin:1rem auto;flex-wrap:wrap;max-width:500px;padding:0 1rem}
.controls button{background:var(--bg3);border:1px solid var(--border);color:var(--text2);padding:.45rem 1rem;border-radius:8px;font-family:var(--font-body);font-size:.8rem;cursor:pointer;transition:all .2s}
.controls button:hover{background:rgba(255,255,255,0.08);color:var(--text)}
.controls button.active{background:rgba(245,158,11,0.15);border-color:var(--accent);color:var(--accent)}

.game-area{max-width:500px;margin:0 auto;padding:0 1rem}
.status-bar{display:flex;justify-content:space-between;align-items:center;padding:.6rem 0;font-size:.8rem;color:var(--text2)}
.timer{font-variant-numeric:tabular-nums;font-weight:500;color:var(--accent)}
.mistakes{color:var(--red)}

.board-container{position:relative;width:100%;aspect-ratio:1;margin:0 auto}
.board{display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(9,1fr);width:100%;height:100%;border:2px solid rgba(245,158,11,0.3);border-radius:4px;overflow:hidden}

.cell{display:flex;align-items:center;justify-content:center;font-size:clamp(1rem,4vw,1.5rem);font-weight:500;cursor:pointer;position:relative;transition:background .15s;
border-right:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--cell);
user-select:none;-webkit-user-select:none;
}
.cell:nth-child(3n){border-right:2px solid rgba(245,158,11,0.2)}
.cell:nth-child(n+19):nth-child(-n+27),
.cell:nth-child(n+46):nth-child(-n+54),
.cell:nth-child(n+73):nth-child(-n+81){border-bottom:2px solid rgba(245,158,11,0.2)}
.cell:nth-child(9n){border-right:none}
.cell:nth-child(n+73){border-bottom:none}

.cell:hover{background:var(--cell-hover)}
.cell.selected{background:var(--cell-selected);box-shadow:inset 0 0 0 2px var(--accent)}
.cell.highlighted{background:var(--cell-highlight)}
.cell.knight-highlight{background:var(--cell-knight)}
.cell.given{color:var(--text);font-weight:600}
.cell.user{color:var(--blue)}
.cell.error{color:var(--red);animation:shake .3s}
.cell.notes-mode{font-size:clamp(.45rem,1.8vw,.6rem);color:var(--text3);line-height:1.1;flex-wrap:wrap;align-content:center;gap:0;padding:2px}
.cell .note{width:33.33%;text-align:center}

@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}

.numpad{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem;margin:1rem 0;max-width:500px}
.numpad button{aspect-ratio:1.4;background:var(--bg3);border:1px solid var(--border);color:var(--text);font-family:var(--font-body);font-size:clamp(1rem,3.5vw,1.3rem);font-weight:500;border-radius:8px;cursor:pointer;transition:all .2s}
.numpad button:hover{background:rgba(255,255,255,0.08);transform:scale(1.05)}
.numpad button:active{transform:scale(.95)}
.numpad button.completed{opacity:.3;pointer-events:none}

.actions{display:flex;gap:.5rem;margin:.6rem 0;flex-wrap:wrap}
.actions button{flex:1;min-width:0;padding:.6rem;background:var(--bg3);border:1px solid var(--border);color:var(--text2);font-family:var(--font-body);font-size:.75rem;border-radius:8px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:.3rem}
.actions button:hover{background:rgba(255,255,255,0.08);color:var(--text)}
.actions button.notes-active{background:rgba(59,130,246,0.15);border-color:var(--blue);color:var(--blue)}

.knight-legend{margin:1.5rem 0;padding:1.2rem;background:var(--bg2);border:1px solid var(--border);border-radius:12px}
.knight-legend h3{font-family:var(--font-display);font-size:1.1rem;margin-bottom:.5rem;color:var(--accent)}
.knight-legend p{font-size:.85rem;color:var(--text2);line-height:1.6}
.knight-diagram{display:grid;grid-template-columns:repeat(5,32px);grid-template-rows:repeat(5,32px);gap:2px;margin:.8rem auto;width:fit-content}
.knight-diagram .kc{background:var(--bg3);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:.7rem;color:var(--text3)}
.knight-diagram .kc.center{background:rgba(245,158,11,0.2);color:var(--accent);font-weight:600}
.knight-diagram .kc.attack{background:rgba(239,68,68,0.15);color:var(--red)}

.seo-content{max-width:680px;margin:3rem auto;padding:0 1rem}
.seo-content h2{font-family:var(--font-display);font-size:1.6rem;color:var(--text);margin:2rem 0 .8rem}
.seo-content h3{font-family:var(--font-display);font-size:1.15rem;color:var(--accent);margin:1.5rem 0 .5rem}
.seo-content p{color:var(--text2);font-size:.9rem;line-height:1.8;margin-bottom:1rem}
.seo-content ul{color:var(--text2);font-size:.9rem;line-height:1.8;margin:0 0 1rem 1.2rem}
.seo-content a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.seo-content a:hover{border-bottom-color:var(--accent)}

.related-links{max-width:680px;margin:2rem auto;padding:1.5rem;background:var(--bg2);border:1px solid var(--border);border-radius:12px}
.related-links h3{font-family:var(--font-display);font-size:1.1rem;color:var(--accent);margin-bottom:.8rem}
.related-links ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.6rem}
.related-links li a{color:var(--text2);text-decoration:none;font-size:.85rem;padding:.5rem .8rem;background:var(--bg3);border-radius:6px;display:block;transition:all .2s}
.related-links li a:hover{color:var(--accent);background:rgba(245,158,11,0.08)}

footer{text-align:center;padding:2rem;color:var(--text3);font-size:.75rem;border-top:1px solid var(--border);margin-top:3rem}
footer a{color:var(--text2);text-decoration:none;margin:0 .5rem}
footer a:hover{color:var(--accent)}

.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:100;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.modal-overlay.show{display:flex}
.modal{background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:2rem;text-align:center;max-width:360px;width:90%;animation:modalIn .3s}
@keyframes modalIn{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.modal h2{font-family:var(--font-display);font-size:1.5rem;color:var(--accent);margin-bottom:.5rem}
.modal p{color:var(--text2);font-size:.9rem;margin-bottom:1.5rem}
.modal button{background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;color:var(--bg);padding:.7rem 2rem;border-radius:8px;font-family:var(--font-body);font-size:.95rem;font-weight:600;cursor:pointer;transition:transform .2s}
.modal button:hover{transform:scale(1.05)}

@media(max-width:420px){
.logo{font-size:1.8rem}
.controls button{padding:.35rem .7rem;font-size:.7rem}
nav.topnav ul{gap:1rem}
nav.topnav{padding:.8rem 1rem}
}