.dfw{display:grid;justify-items:center;gap:10px;max-width:460px;margin:0 auto;padding:4px 0 8px}.dfw-head{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:360px;font-size:.9rem}.dfw-tag{display:inline-flex;align-items:center;gap:6px;font-weight:700;background:var(--accent-soft);color:var(--text);padding:3px 12px;border-radius:999px}.dfw-hard{font-size:.68rem;letter-spacing:.06em;background:var(--accent);color:var(--accent-text);padding:1px 6px;border-radius:999px}.dfw-left{color:var(--muted);font-weight:600}.dfw-board{display:grid;gap:7px;width:min(100%,360px)}.dfw-row{display:grid;grid-template-columns:18px repeat(5,1fr);gap:7px;align-items:center;padding:4px 6px 4px 2px;border-radius:16px;transition:background .2s}.dfw-row.dfw-active{background:var(--surface-2)}.dfw-rn{font-size:.7rem;color:var(--muted);text-align:center;font-variant-numeric:tabular-nums}.dfw-tile{aspect-ratio:1;display:grid;place-items:center;border-radius:14px;background:var(--cell);border:2px solid var(--cell-line);font-size:clamp(1.3rem,7vw,1.9rem);font-weight:800;color:var(--text);text-transform:uppercase;line-height:1}.dfw-tile[data-state=typed]{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.dfw-tile[data-state=correct]{background:var(--tile-correct);border-color:var(--tile-correct);color:#fff;border-radius:50%}.dfw-tile[data-state=present]{background:var(--tile-present);border-color:var(--tile-present);color:#fff;border-radius:14px 14px 14px 4px}.dfw-tile[data-state=absent]{background:var(--tile-absent);border-color:var(--tile-absent);color:#fff;opacity:.85}:root.colorblind .dfw-tile[data-state=present]{color:#10213a}@keyframes dfw-pop{50%{transform:scale(1.1)}}.dfw-tile.dfw-pop{animation:dfw-pop .12s ease-out}@keyframes dfw-rise{0%{transform:translateY(0) scale(1)}40%{transform:translateY(-8px) scale(.92)}to{transform:translateY(0) scale(1)}}.dfw-reveal .dfw-tile{animation:dfw-rise .38s ease-out both;animation-delay:calc(var(--i) * .11s)}@keyframes dfw-shake{20%,60%{transform:translate(-6px)}40%,80%{transform:translate(6px)}}.dfw-row.dfw-shake{animation:dfw-shake .35s}.dfw-msg{min-height:2.2em;text-align:center;font-weight:600;display:flex;flex-wrap:wrap;gap:6px 10px;justify-content:center;align-items:center;padding:0 8px}.dfw-msg-btns{display:inline-flex;gap:6px}.dfw-kb{display:grid;gap:7px;width:100%;max-width:480px;touch-action:manipulation}.dfw-kb-row{display:flex;gap:5px;justify-content:center}.dfw-key{appearance:none;flex:1 1 0;min-width:0;max-width:44px;height:52px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);color:var(--text);font:inherit;font-weight:700;font-size:1rem;cursor:pointer;padding:0;box-shadow:0 2px 0 var(--border)}.dfw-key:active{transform:translateY(2px);box-shadow:none}.dfw-key.dfw-wide{flex:1.6 1 0;max-width:70px;font-size:.85rem}.dfw-key[data-state=correct]{background:var(--tile-correct);border-color:var(--tile-correct);color:#fff;box-shadow:none}.dfw-key[data-state=present]{background:var(--tile-present);border-color:var(--tile-present);color:#fff;box-shadow:none}:root.colorblind .dfw-key[data-state=present]{color:#10213a}.dfw-key[data-state=absent]{background:transparent;color:var(--muted);border-style:dashed;box-shadow:none}.dfw-dist{display:grid;gap:4px;margin:10px 0}.dfw-dist-title{font-weight:700;font-size:.9rem;margin-bottom:2px}.dfw-bar-row{display:grid;grid-template-columns:14px 1fr;gap:6px;align-items:center;font-size:.85rem;font-variant-numeric:tabular-nums}.dfw-bar{background:var(--tile-absent);color:#fff;border-radius:999px;padding:1px 8px;text-align:right;font-weight:700;min-width:26px;box-sizing:border-box}.dfw-bar.dfw-bar-now{background:var(--tile-correct)}@media (max-width: 380px){.dfw-row{gap:5px;grid-template-columns:14px repeat(5,1fr)}.dfw-key{height:48px;font-size:.9rem;border-radius:10px}.dfw-kb-row{gap:4px}}