.bw-game {
  --bw-red:#c94a4a; --bw-yellow:#d5aa22; --bw-green:#4f9655;
  --bw-dark:#333; --bw-light:#f7f7f7;
  box-sizing:border-box; width:min(100%,520px); margin:0 auto;
  padding:clamp(5px,1.5vw,14px); font-family:inherit; color:var(--bw-dark);
  overflow:hidden;
}
.bw-game *, .bw-game *::before, .bw-game *::after { box-sizing:border-box; }
.bw-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:3px}
.bw-title{margin:0;font-size:clamp(20px,5vw,30px);line-height:1}
.bw-subtitle{margin:2px 0 0;font-size:clamp(10px,2.5vw,13px);opacity:.75}
.bw-reset,.bw-share{border:1px solid #aaa;background:#fff;color:#333;border-radius:5px;
 padding:6px 10px;cursor:pointer;font:inherit;font-weight:600}
.bw-reset:hover,.bw-share:hover{background:#eee}
.bw-status{height:18px;text-align:center;font-weight:600;font-size:13px;margin:0;overflow:hidden}
.bw-board{display:flex;flex-direction:column;gap:3px;width:min(100%,320px);margin:0 auto 5px}
.bw-row{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;aspect-ratio:5/1}
.bw-tile{display:flex;align-items:center;justify-content:center;border:2px solid #bbb;background:#fff;
 font-size:clamp(18px,6vw,29px);font-weight:800;line-height:1;border-radius:2px;text-transform:uppercase}
.bw-tile.is-filled{border-color:#777}
.bw-tile.bw-unused{background:var(--bw-red);color:#fff;border-color:var(--bw-red)}
.bw-tile.bw-present{background:var(--bw-yellow);color:#fff;border-color:var(--bw-yellow)}
.bw-tile.bw-correct{background:var(--bw-green);color:#fff;border-color:var(--bw-green)}
.bw-keyboard{width:100%;max-width:490px;margin:0 auto;box-sizing:border-box;overflow-x:hidden}
.bw-key-row{display:flex;flex-wrap:nowrap;justify-content:center;gap:3px;margin-bottom:3px;width:100%;max-width:100%;box-sizing:border-box}

/* Letter keys: all equal flex weight, so every row's total flex units line up.
   Selectors are chained through real ancestors (not just ".bw-key") to raise
   specificity above generic theme rules like "button{min-width:44px!important}"
   (a common accessibility touch-target rule) which would otherwise stop the
   keys from shrinking and push the row past the screen edge on both sides. */
.bw-game .bw-keyboard .bw-key-row button.bw-key{
 box-sizing:border-box !important;
 flex:1 1 0 !important;min-width:0 !important;max-width:none !important;width:auto !important;
 height:clamp(30px,7vw,44px);border:0;border-radius:4px;
 display:flex !important;align-items:center !important;justify-content:center !important;
 text-align:center;
 background:#ddd;color:#222;font:inherit;font-size:clamp(10px,2.7vw,15px);font-weight:700;
 cursor:pointer;padding:0 2px;touch-action:manipulation;
 white-space:nowrap !important;overflow:hidden;text-overflow:clip;line-height:1}

/* Enter/Backspace: distinct classes set directly by JS (not matched off label text),
   so sizing can never silently drift out of sync with a glyph/label change. */
.bw-game .bw-keyboard .bw-key-row button.bw-key-enter{flex:1.6 1 0 !important;font-size:clamp(8px,2.1vw,12px) !important}
.bw-game .bw-keyboard .bw-key-row button.bw-key-del{flex:1.3 1 0 !important;font-size:clamp(8px,2.1vw,12px) !important}

.bw-key[data-state="unused"],.bw-key.bw-unused{background:var(--bw-red);color:#fff}
.bw-key[data-state="present"],.bw-key.bw-present{background:var(--bw-yellow);color:#fff}
.bw-key[data-state="correct"],.bw-key.bw-correct{background:var(--bw-green);color:#fff}
.bw-key:active{transform:translateY(1px)}
.bw-result{margin:6px auto 0;padding:8px;border-radius:6px;background:var(--bw-light);
 text-align:center;border:1px solid #ddd}
.bw-result-title{margin:0 0 2px;font-size:20px}
.bw-answer{margin:0 0 5px;font-weight:800;letter-spacing:2px}
.bw-reflection{text-align:left;font-size:13px;line-height:1.3;margin-bottom:6px}
.bw-help{text-align:center;font-size:10px;opacity:.65;margin:3px 0 0}
@media (max-width:380px){
 .bw-game{padding:3px}
 .bw-header{margin-bottom:1px}
 .bw-board{width:100%;gap:2px;margin-bottom:3px}
 .bw-row{gap:2px}
 .bw-tile{font-size:clamp(17px,5.5vw,24px)}
 .bw-key-row{gap:2px;margin-bottom:2px}
 .bw-key{height:clamp(29px,8vw,36px)}
 .bw-key-enter,.bw-key-del{font-size:clamp(8px,2vw,11px)}
 .bw-result{margin-top:4px;padding:6px}
 .bw-reflection{font-size:12px}
 .bw-help{display:none}
}
@media (max-height:680px){
 .bw-game{padding-top:2px;padding-bottom:2px}
 .bw-status{height:15px;font-size:11px}
 .bw-board{gap:2px;margin-bottom:3px}
 .bw-key-row{margin-bottom:2px}
 .bw-key{height:30px}
 .bw-help{display:none}
 .bw-result{margin-top:3px;padding:5px}
 .bw-reflection{font-size:12px;line-height:1.2}
}