.cw{display:grid;justify-items:center;gap:12px;padding:clamp(12px,3vw,24px);color:#F2EEE4}
.cw-modes{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.cw-modes .chip-btn{background:#1E2146;color:#F2EEE4;border-color:#3A3F7A}
.cw-modes .chip-btn[aria-pressed="true"]{background:#F6C333;color:#1B1D33}
.cw-grid{display:grid;gap:6px}
.cw-guess{display:grid;grid-template-columns:repeat(5,clamp(44px,12vw,58px));gap:6px}
.cw-guess.shake{animation:cw-shake .35s steps(4,end)}
@keyframes cw-shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.cw-tile{position:relative;aspect-ratio:1;display:grid;place-items:center;background:#12142A;border:3px solid #3A3F7A;
  font-family:var(--body);font-weight:700;font-size:clamp(1.3rem,5vw,1.8rem);text-transform:uppercase}
.cw-guess.now .cw-tile:not(:empty) span:not(:empty){color:#FFFFFF}
.cw-tile i{position:absolute;bottom:4px;left:50%;width:8px;height:8px;margin-left:-4px;background:#2A2D52}
.cw-tile.hit{background:#F6C333;border-color:#FFE867;color:#1B1D33}
.cw-tile.hit i{background:#1B1D33;box-shadow:-11px 0 0 #1B1D33,11px 0 0 #1B1D33}
.cw-tile.near{background:#7B4BC9;border-color:#A77BEB;color:#FFFFFF}
.cw-tile.near i{background:#FFFFFF}
.cw-tile.miss{background:#2A2D45;border-color:#2A2D45;color:#8E91B0}
.cw-tile.hint{border-color:#F6C333;color:#F6C333;border-style:dashed}
.cw-tile.flip{animation:cw-flip .32s steps(3,end) both}
@keyframes cw-flip{from{transform:scaleY(.1)}to{transform:scaleY(1)}}
.cw-msg{font-family:var(--body);font-weight:600;text-align:center;min-height:1.5em}
.cw-keys{display:grid;gap:6px;width:min(100%,520px)}
.cw-row{display:flex;gap:5px;justify-content:center}
.cw-key{flex:1 1 0;min-width:0;height:50px;border:0;border-bottom:4px solid #0B0C1A;background:#3A3F5C;color:#F2EEE4;
  font-family:var(--body);font-weight:700;font-size:1rem;text-transform:uppercase;cursor:pointer;border-radius:3px}
.cw-key.wide{flex:1.6 1 0;font-size:.8rem}
.cw-key:active{transform:translateY(2px)}
.cw-key.hit{background:#F6C333;color:#1B1D33}
.cw-key.near{background:#7B4BC9}
.cw-key.miss{background:#1B1D30;color:#6E7194}
.cw-end{display:grid;gap:12px;width:min(100%,420px);padding:14px;background:#1E2146;border:3px solid #3A3F7A}
.cw-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center;font-family:var(--body);font-size:.85rem}
.cw-stats b{display:block;font-size:1.4rem}
.cw-dist{display:grid;gap:4px;font-family:var(--body);font-size:.85rem}
.cw-dist div{display:grid;grid-template-columns:1.2em 1fr;gap:6px;align-items:center}
.cw-dist i{display:block;font-style:normal;background:#7B4BC9;text-align:right;padding:1px 6px;font-weight:700}
.cw-share{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center;font-family:var(--body);font-size:.9rem}
@media (prefers-reduced-motion:reduce){.cw-tile.flip,.cw-guess.shake{animation:none}}