/* Crossword — game-specific */
.diff-seg { display:flex; gap:8px; }
.diff-seg button { flex:1; }
.game-shell { max-width:480px; }
body.playful { overflow-y:auto; }

.clue-banner {
  text-align:center; font-weight:700; font-size:16px; padding:10px 14px; margin-bottom:12px;
  background:var(--card); border:3px solid var(--stroke); border-radius:14px; box-shadow:0 3px 0 var(--stroke); min-height:42px;
}
.board-wrap { display:flex; justify-content:center; }
.cw-grid {
  display:grid; gap:3px; background:var(--stroke); padding:3px; border-radius:10px; box-shadow:0 6px 0 var(--stroke);
  grid-template-columns:repeat(var(--cols),1fr); width:100%; max-width:330px; aspect-ratio:1; touch-action:manipulation;
}
.cw-cell {
  position:relative; background:var(--card); border-radius:5px; display:flex; align-items:center; justify-content:center;
  font-size:24px; font-weight:800; cursor:pointer; color:var(--blue); text-transform:uppercase;
}
.cw-cell.block { background:var(--stroke); cursor:default; }
.cw-cell.hl { background:#cfeefc; }
.cw-cell.active { background:var(--yellow); color:var(--stroke); }
.cw-cell.wrong { color:#FF3B30; }
.cw-cell.num::before { content:attr(data-num); position:absolute; top:1px; left:3px; font-size:9px; font-weight:700; color:var(--muted); }

.kbd { display:flex; flex-direction:column; gap:5px; margin:16px auto 0; max-width:420px; }
.kbd-row { display:flex; gap:4px; justify-content:center; }
.kbd button {
  flex:1; max-width:40px; aspect-ratio:0.9; font:inherit; font-weight:700; font-size:15px; color:var(--stroke); cursor:pointer;
  background:var(--card); border:2.5px solid var(--stroke); border-radius:8px; box-shadow:0 2px 0 var(--stroke);
}
.kbd button:active { transform:translateY(2px); box-shadow:0 0 0 var(--stroke); }
.kbd button.wide { max-width:64px; }

.clue-lists { display:flex; gap:16px; margin-top:18px; }
.clue-col { flex:1; }
.clue-col h4 { font-size:13px; text-transform:uppercase; letter-spacing:1px; color:var(--muted); margin-bottom:6px; }
.clue-col ul { list-style:none; display:flex; flex-direction:column; gap:4px; }
.clue-col li { font-size:13px; cursor:pointer; padding:3px 6px; border-radius:7px; }
.clue-col li.done { text-decoration:line-through; color:var(--muted); }
.clue-col li.cur { background:var(--yellow); }