/* 1960smusic.net — reusable crossword player.
   Loaded in addition to /styles.css and /tools/tools.css; reuses their :root variables. */

.cw-wrap{
  display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

.cw-board{
  position:relative;flex:0 0 auto;max-width:100%;overflow:auto;
  border:1px solid var(--line);border-radius:10px;background:var(--card);padding:10px;
}
.cw-grid{
  display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);width:max-content;
}
.cw-cell{
  position:relative;width:26px;height:26px;background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;font-weight:700;color:var(--ink);
  cursor:pointer;user-select:none;
}
.cw-cell.cw-block{background:var(--ink);cursor:default;}
.cw-cell .cw-num{
  position:absolute;top:1px;left:2px;font-size:.55rem;font-weight:600;
  color:var(--muted);line-height:1;
}
.cw-cell.cw-selected{background:var(--amber);}
.cw-cell.cw-in-word{background:#ffe2cc;}
:root[data-theme="dark"] .cw-cell.cw-in-word{background:#4a3626;}
.cw-cell.cw-wrong{color:var(--red);}
.cw-cell.cw-revealed{color:var(--muted);}

.cw-hidden-input{
  position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;border:none;padding:0;
  pointer-events:none;
}

.cw-controls{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px;}

.cw-status{font-family:sans-serif;font-size:.95rem;color:var(--muted);margin:0 0 14px;}
.cw-status.cw-done{color:var(--dial-green,#4F7A5C);font-weight:700;}

.cw-clues{flex:1 1 260px;min-width:240px;display:grid;grid-template-columns:1fr;gap:20px;}
.cw-clue-col h3{margin:0 0 10px;font-size:1.05rem;}
.cw-clue-list{list-style:none;margin:0;padding:0;}
.cw-clue-list li{
  font-size:.92rem;padding:6px 8px;border-radius:6px;cursor:pointer;
  display:flex;gap:8px;
}
.cw-clue-list li:hover{background:var(--card);}
.cw-clue-list li.cw-active{background:var(--amber);color:#2a160b;}
.cw-clue-list .cw-clue-num{font-weight:700;flex:0 0 auto;}

@media (max-width: 640px){
  .cw-cell{width:22px;height:22px;font-size:.85rem;}
  .cw-cell .cw-num{font-size:.5rem;}
}