.wg-page { width:100%; max-width:620px; margin:0 auto; padding:30px 18px 50px 18px; box-sizing:border-box; }
.wg-header { margin-bottom:22px; text-align:center; }
.wg-header h1 { margin:0 0 7px 0; color:#24375e; font-size:32px; font-weight:600; }
.wg-subtitle { color:#667085; font-size:15px; }
.wg-game { padding:24px; background:#fff; border:1px solid #e3e7ed; border-radius:14px; box-sizing:border-box; }
.wg-mode { margin-bottom:8px; color:#7a8494; font-size:13px; font-weight:600; text-align:center; text-transform:uppercase; letter-spacing:1px; }
.wg-reference { margin:0 0 20px 0; color:#24375e; font-size:17px; font-weight:600; text-align:center; }
.wg-board { display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
.wg-row { display:flex; justify-content:center; gap:7px; }
.wg-tile { width:52px; height:52px; display:flex; align-items:center; justify-content:center; background:#fff; border:2px solid #d5dae2; border-radius:9px; color:#20242b; font-size:26px; font-weight:700; text-transform:uppercase; box-sizing:border-box; }
.wg-tile.wg-filled { border-color:#9fa8b5; }
.wg-tile.wg-correct { background:#55b96a; border-color:#55b96a; color:#fff; }
.wg-tile.wg-present { background:#c6923b; border-color:#c6923b; color:#fff; }
.wg-tile.wg-absent { background:#87909c; border-color:#87909c; color:#fff; }
.wg-message { min-height:24px; margin-bottom:14px; color:#24375e; font-size:15px; font-weight:600; text-align:center; }
.wg-hint-area { margin:0 0 20px 0; text-align:center; }
.wg-hint-button { padding:8px 16px; background:#fff; border:1px solid #cbd5e1; border-radius:7px; color:#315d93; cursor:pointer; font-size:14px; font-weight:600; }
.wg-hint-button:hover { background:#f5f7fa; border-color:#aeb9c7; }
.wg-hint-button:focus-visible { outline:2px solid #315d93; outline-offset:2px; }
.wg-hint { display:none; padding:12px 15px; background:#f5f7fa; border:1px solid #e7eaf0; border-radius:8px; color:#5e6877; font-size:14px; line-height:1.5; text-align:left; box-sizing:border-box; }
.wg-hint strong { color:#344054; }
.wg-hint.wg-show { display:block; }
.wg-keyboard { display:flex; flex-direction:column; gap:7px; width:100%; }
.wg-keyboard-row { display:flex; justify-content:center; gap:5px; min-width:0; }
.wg-key { min-width:37px; height:46px; padding:0 9px; flex:0 1 auto; background:#d9dee5; border:0; border-radius:6px; color:#20242b; cursor:pointer; font-size:13px; font-weight:700; box-sizing:border-box; }
.wg-key:hover { background:#cbd2db; }
.wg-key:focus-visible { outline:2px solid #315d93; outline-offset:2px; }
.wg-key.wg-key-wide { min-width:62px; font-size:11px; }
.wg-key.wg-correct { background:#55b96a; color:#fff; }
.wg-key.wg-present { background:#c6923b; color:#fff; }
.wg-key.wg-absent { background:#87909c; color:#fff; }
.wg-finished { display:none; margin-top:24px; padding-top:22px; border-top:1px solid #e5e8ec; text-align:center; }
.wg-result-title { margin-bottom:7px; color:#24375e; font-size:22px; font-weight:600; }
.wg-answer { margin-bottom:18px; color:#344054; font-size:17px; }
.wg-new-game { display:inline-block; padding:12px 22px; background:#315d93; border-radius:7px; color:#fff; font-size:15px; font-weight:600; text-decoration:none; }
.wg-new-game:hover { background:#284f7e; }

@media (max-width:520px) {
    .wg-page { padding:20px 10px 40px 10px; }
    .wg-game { padding:18px 10px; }
    .wg-header h1 { font-size:28px; }
    .wg-reference { margin-bottom:18px; font-size:16px; }
    .wg-board { gap:5px; }
    .wg-row { gap:5px; }
    .wg-tile { width:44px; height:44px; border-radius:7px; font-size:22px; }
    .wg-keyboard { gap:6px; }
    .wg-keyboard-row { gap:3px; }
    .wg-key { min-width:0; height:44px; padding:0 6px; flex:1 1 0; font-size:12px; }
    .wg-key.wg-key-wide { flex:1.45 1 0; min-width:0; font-size:10px; }
}

@media (max-width:380px) {
    .wg-game { padding:16px 7px; }
    .wg-row { gap:4px; }
    .wg-tile { width:40px; height:40px; font-size:20px; }
    .wg-keyboard-row { gap:2px; }
    .wg-key { height:42px; padding:0 4px; font-size:11px; }
    .wg-key.wg-key-wide { font-size:9px; }
}