*{box-sizing:border-box}
body{margin:0;background:#f2f4f8;font-family:Arial,sans-serif;min-height:100vh;padding:16px;color:#263238}
.container{max-width:700px;margin:auto;background:#fff;padding:22px;border-radius:14px;box-shadow:0 8px 28px rgba(0,0,0,.10);position:relative}
.home-btn{display:inline-block;text-decoration:none;background:#eef3f8;color:#1565c0;padding:8px 12px;border-radius:8px;font-weight:700;margin-bottom:8px}
h1{text-align:center;color:#1565c0;margin:5px 0 18px}
.toolbar{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
.toolbar label{font-weight:700}
select,button{font:inherit;border:1px solid #ccd4dc;border-radius:8px;padding:9px 12px;background:#fff}
button{cursor:pointer;background:#1565c0;color:#fff;border:0;font-weight:700}
.level{padding:9px 12px;background:#f4f7fa;border-radius:8px}
.rules{background:#f7f9fb;border-radius:10px;padding:10px 12px;font-size:14px;line-height:1.45;margin-bottom:14px;text-align:center}
#board{margin:auto;display:grid;gap:2px;justify-content:center;background:#222;padding:2px;border-radius:6px;width:max-content}
.cell{position:relative;background:#222;overflow:hidden}
.black{background:#222}
.white{background:#fff}
input{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;text-align:center;font-size:clamp(16px,5vw,27px);font-weight:700;color:#1565c0;outline:none;padding-top:7px}
input:focus{background:#eaf3ff}
.clue{position:absolute;color:#fff;font-size:clamp(8px,2.4vw,12px);font-weight:700;line-height:1;z-index:2;pointer-events:none}
.clue.down{top:3px;right:4px}
.clue.across{bottom:3px;left:4px}
.black::after{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid #666;transform:rotate(-45deg);transform-origin:center;opacity:.8}
.black.no-diag::after{display:none}
#message{text-align:center;min-height:24px;margin:14px 0;font-weight:700}
.game-info{display:flex;justify-content:center;gap:12px;align-items:center}
.game-info button{background:#455a64;padding:7px 12px}
@media(max-width:600px){
 .container{padding:14px}
 .toolbar{gap:7px}
 .toolbar>*{font-size:14px}
 .rules{font-size:12px}
 #board{max-width:100%;width:100%}
 .cell{width:calc((min(92vw, 650px) - 10px)/9);height:calc((min(92vw, 650px) - 10px)/9)}
}
@media(min-width:601px){
 .cell{width:58px;height:58px}
}