.wg-grid { display: grid; grid-template-columns: repeat(5, 54px); gap: 6px; }
.wg-c { height: 54px; display: grid; place-items: center; border: 2px solid var(--card-line); border-radius: 8px; font-size: 26px; font-weight: 600; }
.wg-c.hit, .wg-k.hit { background: var(--green); border-color: var(--green); color: #fff; }
.wg-c.near, .wg-k.near { background: var(--yellow); border-color: var(--yellow); color: #1a1a1a; }
.wg-c.miss { background: var(--dot-off); border-color: var(--dot-off); color: #fff; }
.wg-k.miss { opacity: .35; }
.wg-in { display: flex; gap: 8px; }
.wg-in .input { width: 150px; text-transform: uppercase; letter-spacing: .2em; font-weight: 500; }
.wg-keys { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.wg-keys div { display: flex; gap: 5px; }
.wg-k { width: 28px; height: 34px; display: grid; place-items: center; border-radius: 6px; background: var(--chip); font-size: 13.5px; font-weight: 500; border: 2px solid transparent; }