:root{--bg:#fff;--fg:#1a1a1b;--muted:#787c7e;--border:#d3d6da;--border-strong:#878a8c;--key-bg:#d3d6da;--key-fg:#1a1a1b;--correct:#6aaa64;--present:#c9b458;--absent:#787c7e;--tile-empty-border:#d3d6da;--panel-bg:#fff;--overlay:#00000080}@media (prefers-color-scheme:dark){:root{--bg:#121213;--fg:#fff;--muted:#818384;--border:#3a3a3c;--border-strong:#565758;--key-bg:#818384;--key-fg:#fff;--correct:#538d4e;--present:#b59f3b;--absent:#3a3a3c;--tile-empty-border:#3a3a3c;--panel-bg:#1a1a1b;--overlay:#0009}}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;touch-action:manipulation;font-family:Helvetica Neue,Helvetica,Arial,Clear Sans,sans-serif;overflow:hidden}.app{flex-direction:column;max-width:500px;height:100dvh;margin:0 auto;display:flex}.topbar{border-bottom:1px solid var(--border);flex:none;justify-content:space-between;align-items:center;height:52px;padding:6px 12px;display:flex}.title{letter-spacing:.06em;-webkit-user-select:none;user-select:none;font-size:30px;font-weight:800}.icon-btn{color:var(--fg);cursor:pointer;background:0 0;border:none;border-radius:50%;place-items:center;width:40px;height:40px;font-size:20px;display:grid}.icon-btn:hover{background:color-mix(in srgb, var(--fg) 8%, transparent)}.board{aspect-ratio:5/6;flex:auto;grid-template-rows:repeat(6,1fr);gap:5px;width:min(100%,350px);max-height:420px;margin:0 auto;padding:12px;display:grid}.row{grid-template-columns:repeat(5,1fr);gap:5px;display:grid}.row--shake{animation:.5s shake}@keyframes shake{10%,90%{transform:translate(-1px)}20%,80%{transform:translate(2px)}30%,50%,70%{transform:translate(-4px)}40%,60%{transform:translate(4px)}}.tile{text-transform:uppercase;border:2px solid var(--tile-empty-border);color:var(--fg);-webkit-user-select:none;user-select:none;aspect-ratio:1;place-items:center;font-size:clamp(1.5rem,8vw,2rem);font-weight:700;line-height:1;display:grid}.tile--filled{border-color:var(--border-strong);animation:.1s pop}@keyframes pop{0%{transform:scale(.9)}to{transform:scale(1)}}.tile--flip{animation:.3s forwards flip}@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(-90deg)}to{transform:rotateX(0)}}.tile--bounce{animation:.5s bounce}@keyframes bounce{0%,20%{transform:translateY(0)}40%{transform:translateY(-24px)}60%{transform:translateY(-12px)}80%{transform:translateY(-6px)}to{transform:translateY(0)}}.tile--correct{background:var(--correct);border-color:var(--correct);color:#fff}.tile--present{background:var(--present);border-color:var(--present);color:#fff}.tile--absent{background:var(--absent);border-color:var(--absent);color:#fff}.tile--sm{aspect-ratio:1;border-width:2px;width:40px;height:40px;font-size:1.4rem}.message{text-align:center;letter-spacing:.04em;flex:none;min-height:22px;padding:0 12px;font-size:14px;font-weight:600}.keyboard{flex-direction:column;flex:none;gap:8px;margin-top:auto;padding:8px;display:flex}.kb-row{justify-content:center;gap:6px;display:flex}.key{background:var(--key-bg);min-width:0;height:58px;color:var(--key-fg);text-transform:uppercase;cursor:pointer;-webkit-user-select:none;user-select:none;border:none;border-radius:4px;flex:1 1 0;font-size:15px;font-weight:700;transition:background .15s}.key:active{filter:brightness(.9)}.key--wide{flex:1.5 1 0;font-size:12px}.key--correct{background:var(--correct);color:#fff}.key--present{background:var(--present);color:#fff}.key--absent{background:var(--absent);color:#fff}.overlay[hidden]{display:none}.overlay{background:var(--overlay);z-index:10;place-items:center;padding:16px;animation:.15s fade;display:grid;position:fixed;inset:0}@keyframes fade{0%{opacity:0}}.panel{background:var(--panel-bg);color:var(--fg);border-radius:12px;width:min(100%,380px);padding:24px 20px 20px;animation:.18s rise;position:relative;box-shadow:0 8px 30px #00000059}@keyframes rise{0%{opacity:0;transform:translateY(12px)}}.panel__close{color:var(--fg);cursor:pointer;background:0 0;border:none;font-size:26px;line-height:1;position:absolute;top:8px;right:10px}.panel__title{text-align:center;letter-spacing:.04em;text-transform:uppercase;margin-bottom:16px;font-size:20px;font-weight:800}.panel__quip{text-align:center;color:var(--muted);margin-top:14px;font-size:14px;font-style:italic}.panel__actions{gap:10px;margin-top:20px;display:flex}.btn{background:var(--correct);color:#fff;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;border:none;border-radius:6px;flex:1;padding:13px 16px;font-size:15px;font-weight:700}.btn--ghost{color:var(--fg);border:2px solid var(--border-strong);background:0 0}.stats{justify-content:center;gap:8px;display:flex}.stat{flex-direction:column;align-items:center;min-width:60px;display:flex}.stat__num{font-size:30px;font-weight:400}.stat__label{text-align:center;color:var(--muted);font-size:11px}.dist__heading{text-align:center;text-transform:uppercase;letter-spacing:.05em;margin:18px 0 10px;font-size:13px;font-weight:700}.dist{flex-direction:column;gap:4px;display:flex}.dist__bar{align-items:center;gap:6px;font-size:13px;display:flex}.dist__label{text-align:center;width:12px;font-weight:600}.dist__fill{background:var(--absent);color:#fff;text-align:right;border-radius:2px;min-width:22px;padding:2px 6px;font-weight:700}.dist__bar--hi .dist__fill{background:var(--correct)}.help__lead{margin-bottom:10px;font-size:15px}.help__list{color:var(--fg);margin-bottom:14px;padding-left:20px;font-size:14px;line-height:1.5;list-style:outside}.help__examples{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:14px 0}.help__row{gap:5px;margin-bottom:6px;display:flex}.help__cap{margin-bottom:12px;font-size:14px}.help__note{color:var(--muted);text-align:center;margin-top:14px;font-size:13px;font-style:italic}@media (max-height:700px){.key{height:48px}.title{font-size:26px}}