.game-switch{display:flex; gap:10px; margin-bottom:30px; flex-wrap:wrap; justify-content:center;}
.game-switch button{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 18px;
  color:var(--text); cursor:pointer; text-align:left; font-family:'Plus Jakarta Sans',sans-serif; min-width:200px;
  box-shadow:var(--shadow);
}
.game-switch button h4{margin:0 0 4px; font-size:0.95rem; font-family:'Plus Jakarta Sans',sans-serif; color:var(--text);}
.game-switch button p{margin:0; color:var(--muted); font-size:0.78rem;}
.game-switch button.active{border-color:var(--primary); box-shadow:0 0 0 2px var(--primary-dim);}
.game-panel{display:none;}
.game-panel.active{display:block;}
.games-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:24px; align-items:start;}
.game-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow);}
.game-card h3{margin:0 0 6px; font-size:1.05rem;}
.game-card p{color:var(--muted); font-size:0.88rem; margin:0 0 16px;}

.length-select{display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap;}
.len-btn{width:38px; height:38px; border-radius:8px; border:1px solid var(--line); background:var(--panel); color:var(--text); font-family:'IBM Plex Mono',monospace; cursor:pointer;}
.len-btn.active{background:var(--accent); color:#fff; border-color:var(--accent);}
.len-btn:disabled{opacity:0.3; cursor:not-allowed;}

#board{display:flex; flex-direction:column; gap:6px; margin-bottom:20px;}
.board-row{display:flex; gap:6px;}
.board-row.shake{animation:row-shake .4s ease;}
@keyframes row-shake{
  10%,90%{transform:translateX(-2px);}
  20%,80%{transform:translateX(4px);}
  30%,50%,70%{transform:translateX(-8px);}
  40%,60%{transform:translateX(8px);}
}
.tile{
  width:44px; height:44px; border:2px solid var(--line); border-radius:8px; display:flex; align-items:center;
  justify-content:center; font-family:'IBM Plex Mono',monospace; font-size:1.2rem; font-weight:600;
  text-transform:uppercase; background:var(--panel-2);
}
.tile.correct{background:var(--primary); border-color:var(--primary); color:#fff;}
.tile.present{background:var(--accent); border-color:var(--accent); color:#fff;}
.tile.absent{background:var(--panel-2); border-color:var(--line); color:var(--muted); opacity:0.7;}

#keyboard{display:flex; flex-direction:column; gap:6px;}
.kb-row{display:flex; gap:5px; justify-content:center;}
.key{min-width:28px; padding:10px 6px; border-radius:8px; border:none; background:var(--panel-2); color:var(--text); font-family:'IBM Plex Mono',monospace; font-size:0.78rem; cursor:pointer; text-transform:uppercase;}
.key.wide{min-width:50px; font-size:0.7rem;}
.key.correct{background:var(--primary); color:#fff;}
.key.present{background:var(--accent); color:#fff;}
.key.absent{opacity:0.5;}
#game-message{margin-top:14px; padding:12px 16px; border-radius:var(--radius-sm); font-size:0.88rem; background:var(--panel-2); border:1px solid var(--line); min-height:20px;}

.elem-controls{display:flex; gap:10px; margin-bottom:18px;}
.elem-controls select{flex:1; padding:11px 13px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--bg); color:var(--text); font-size:0.88rem;}
.elem-controls button{padding:11px 18px; border-radius:8px; border:none; background:var(--primary); color:#fff; font-weight:600; cursor:pointer;}
#elem-table{width:100%; border-collapse:collapse; font-size:0.82rem;}
#elem-table th{text-align:left; color:var(--muted); font-weight:600; padding:6px 8px; border-bottom:1px solid var(--line); font-size:0.74rem; font-family:'Plus Jakarta Sans',sans-serif;}
#elem-table td{padding:10px 8px; border-bottom:1px solid var(--line);}
.cell-correct{background:var(--primary); color:#fff;}
.cell-close{background:var(--accent); color:#fff;}
.cell-wrong{background:var(--panel-2); color:var(--muted);}
.arrow{margin-left:4px;}

@media (max-width:900px){
  .games-grid{grid-template-columns:1fr;}
}