.wordle-area { max-width:500px; margin:0 auto; padding-bottom:10px; }
.message { min-height:30px; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:var(--ink); margin-bottom:10px; }
.message.error { color:#c62828; }
.message.ok { color:var(--blue); }
.board { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; margin-bottom:22px; }
.cell { aspect-ratio:1; border:2px solid var(--rule); background:var(--panel); display:flex; align-items:center; justify-content:center; font-size:clamp(22px,4vw,32px); font-weight:800; text-transform:uppercase; letter-spacing:-.02em; transition:transform .15s,border-color .15s; }
.cell.filled { border-color:var(--muted); }
.cell.correct { background:#6aaa64; border-color:#6aaa64; color:#fff; }
.cell.present { background:#c9b458; border-color:#c9b458; color:#fff; }
.cell.absent { background:#787c7e; border-color:#787c7e; color:#fff; }
.cell.shake { animation:shake .35s; }
.cell.pop { animation:pop .25s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
@keyframes pop { 0%{transform:scale(1)} 50%{transform:scale(1.12)} 100%{transform:scale(1)} }
.keyboard { display:flex; flex-direction:column; gap:7px; margin-bottom:20px; }
.kb-row { display:flex; gap:5px; justify-content:center; }
.key { flex:1; max-width:46px; height:52px; border:1px solid var(--rule); background:var(--panel); color:var(--ink); font-weight:800; font-size:15px; text-transform:uppercase; padding:0; }
.key.wide { flex:1.6; max-width:70px; font-size:12px; }
.key.correct { background:#6aaa64; border-color:#6aaa64; color:#fff; }
.key.present { background:#c9b458; border-color:#c9b458; color:#fff; }
.key.absent { background:#787c7e; border-color:#787c7e; color:#fff; }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.stats-panel { max-width:500px; margin:0 auto 20px; padding:18px; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; text-align:center; margin-bottom:14px; }
.stats-grid b { display:block; font-size:24px; letter-spacing:-.03em; }
.stats-grid span { font-size:12px; color:var(--muted); }
.st-dist { margin-bottom:14px; }
.st-row { display:flex; align-items:center; gap:8px; font:11px ui-monospace,monospace; color:var(--muted); margin-bottom:5px; }
.st-bar { height:16px; background:var(--bluewash); }
.st-bar b { display:block; height:100%; background:var(--blue); min-width:0; }
.hidden { display:none !important; }
@media (max-width:560px) { .board { gap:5px; } .key { height:46px; font-size:13px; } .key.wide { font-size:11px; } }