*{box-sizing:border-box;margin:0;padding:0}body{color:#fff;background:#121213;justify-content:center;font-family:Helvetica Neue,Arial,sans-serif;display:flex}#app{flex-direction:column;align-items:center;width:100%;max-width:500px;padding:10px;display:flex}header{text-align:center;border-bottom:1px solid #3a3a3c;width:100%;margin-bottom:20px;padding:12px 0}header h1{letter-spacing:.15em;text-transform:uppercase;font-size:2rem}#board{grid-template-rows:repeat(6,1fr);gap:5px;margin-bottom:20px;display:grid}.row{grid-template-columns:repeat(5,1fr);gap:5px;display:grid}.tile{text-transform:uppercase;border:2px solid #3a3a3c;justify-content:center;align-items:center;width:62px;height:62px;font-size:2rem;font-weight:700;transition:transform .1s;display:flex}.tile.filled{border-color:#565758;animation:.1s ease-in-out pop}.tile.correct{background:#538d4e;border-color:#538d4e}.tile.present{background:#b59f3b;border-color:#b59f3b}.tile.absent{background:#3a3a3c;border-color:#3a3a3c}.tile.reveal{animation:.5s forwards flip}@keyframes pop{50%{transform:scale(1.1)}}@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}to{transform:rotateX(0)}}#keyboard{flex-direction:column;align-items:center;gap:6px;display:flex}.kb-row{gap:6px;display:flex}.key{color:#fff;cursor:pointer;text-transform:uppercase;background:#818384;border:none;border-radius:4px;justify-content:center;align-items:center;min-width:43px;height:58px;padding:0 8px;font-size:.85rem;font-weight:700;transition:background .2s;display:flex}.key.wide{min-width:65px;font-size:.75rem}.key.correct{background:#538d4e}.key.present{background:#b59f3b}.key.absent{background:#3a3a3c}#message{justify-content:center;align-items:center;min-height:40px;margin:10px 0;display:flex}#message .toast,#modal-message .toast{color:#121213;background:#fff;border-radius:4px;padding:10px 20px;font-weight:700;animation:.2s fade-in}.confirm{text-align:center;animation:.2s fade-in}.confirm p{color:#818384;font-size:.9rem}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-5px)}40%{transform:translate(5px)}60%{transform:translate(-5px)}80%{transform:translate(5px)}}@keyframes fade-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}#challenge-btn{color:#fff;cursor:pointer;text-transform:uppercase;letter-spacing:.05em;background:#538d4e;border:none;border-radius:4px;margin-top:20px;padding:12px 28px;font-size:1rem;font-weight:700}#challenge-btn:hover{background:#6aaf59}.hidden{display:none!important}#modal-overlay{z-index:100;background:#000000b3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}#modal{background:#1a1a1b;border:1px solid #3a3a3c;border-radius:8px;flex-direction:column;align-items:center;gap:16px;width:90%;max-width:420px;min-height:282px;padding:30px;display:flex;position:relative}#modal h2{text-transform:uppercase;letter-spacing:.1em;font-size:1.3rem}#modal p{color:#818384;font-size:.9rem}#modal-close{color:#818384;cursor:pointer;background:0 0;border:none;font-size:1.5rem;line-height:1;position:absolute;top:10px;right:14px}#modal-close:hover{color:#fff}#modal-tiles{grid-template-columns:repeat(5,1fr);gap:5px;display:grid}#modal-tiles .tile{cursor:text;width:56px;height:56px;font-size:1.8rem}#modal-message{justify-content:center;align-items:center;height:0;margin-top:12px;display:flex;position:relative}#modal-message .toast{white-space:nowrap;position:absolute}#modal-actions{gap:10px;margin-top:12px;display:flex}#modal-share,#modal-copy{color:#fff;cursor:pointer;background:#818384;border:none;border-radius:4px;padding:8px 20px;font-size:.9rem;font-weight:700}#modal-share{background:#538d4e}#modal-share:hover{background:#6aaf59}#modal-copy:hover{background:#9a9b9c}@media (width<=400px){.tile{width:52px;height:52px;font-size:1.6rem}#modal-tiles .tile{width:46px;height:46px;font-size:1.5rem}.key{min-width:30px;height:50px;font-size:.75rem}.key.wide{min-width:50px}}