
#moka-crossword{max-width:700px;margin:20px auto;font-family:Arial}
#moka-crossword h2{color:#8B4513;text-align:center}
#moka-crossword p{text-align:center;color:#666;font-style:italic}
.cw-layout{display:grid;grid-template-columns:300px 1fr;gap:20px}
.cw-grid{display:grid;grid-template-columns:repeat(8,30px);grid-template-rows:repeat(8,30px);gap:1px;background:#000;border:2px solid #000}
.cw-cell{background:#fff;position:relative;display:flex}
.cw-cell.black{background:#000}
.cw-cell input{width:100%;height:100%;border:none;text-align:center;font-size:12px;font-weight:bold;text-transform:uppercase;outline:none}
.cw-cell input:focus{background:#e3f2fd}
.cw-cell.correct{background:#d4edda!important}
.cw-cell.incorrect{background:#f8d7da!important}
.cw-cell.revealed{background:#fff3cd!important}
.cw-num{position:absolute;top:1px;left:1px;font-size:8px;font-weight:bold;z-index:1}
.cw-clues{padding:10px;background:#f8f9fa;border-radius:5px}
.cw-clues h3{color:#8B4513;margin:5px 0;font-size:14px;border-bottom:1px solid #D2691E}
.cw-clues div{padding:2px 0;cursor:pointer;font-size:12px}
.cw-clues div:hover{background:#e9ecef}
.cw-clues div.active{background:#e3f2fd;font-weight:bold}
.cw-btns{text-align:center;margin:15px 0}
.cw-btns button{background:linear-gradient(135deg,#8B4513,#D2691E);color:#fff;border:none;padding:8px 12px;border-radius:4px;font-size:11px;margin:0 3px;cursor:pointer}
#msg{text-align:center;color:#4CAF50;font-weight:bold;display:none}
@media(max-width:600px){.cw-layout{grid-template-columns:1fr;gap:10px}.cw-grid{grid-template-columns:repeat(8,25px);grid-template-rows:repeat(8,25px)}}
