/* ---------- Wordle ---------- */
.wordle-wrap { display:flex; flex-direction:column; align-items:center; gap:10px; padding:6px; }
.wgrid { display:grid; grid-template-rows: repeat(6, 34px); gap:5px; }
.wrow { display:grid; grid-template-columns: repeat(5, 34px); gap:5px; }
.wtile {
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  font-weight:bold; font-size:18px; font-family:"Courier New",monospace;
  background:#fff;
  box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 #fff, inset 2px 2px 0 #808080;
  color:#000;
}
.wtile.correct { background:#008000; color:#fff; box-shadow: inset -1px -1px 0 #003300, inset 1px 1px 0 #55aa55; }
.wtile.present { background:#b8860b; color:#fff; box-shadow: inset -1px -1px 0 #5c4400, inset 1px 1px 0 #d4a017; }
.wtile.absent  { background:#808080; color:#fff; box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #a0a0a0; }
.wkeyboard { display:flex; flex-direction:column; gap:4px; align-items:center; }
.wkrow { display:flex; gap:3px; }
.wkey {
  min-width:26px; height:30px; padding:0 4px; font-size:12px; font-weight:bold;
  display:flex; align-items:center; justify-content:center;
}
.wkey.wide { min-width:44px; font-size:10px; }
.wkey.correct { background:#008000; color:#fff; box-shadow: inset -1px -1px 0 #003300, inset 1px 1px 0 #55aa55;}
.wkey.present { background:#b8860b; color:#fff; box-shadow: inset -1px -1px 0 #5c4400, inset 1px 1px 0 #d4a017;}
.wkey.absent  { background:#606060; color:#ddd; box-shadow: inset -1px -1px 0 #303030, inset 1px 1px 0 #808080;}
#wmsg { font-weight:bold; height:18px; }