.tile{width:62px;height:62px;perspective:1000px}.tile-inner{position:relative;width:100%;height:100%;transition:transform .6s;transform-style:preserve-3d}.tile-front,.tile-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;text-transform:uppercase;border:2px solid #3a3a3c;box-sizing:border-box;color:#fff}.tile-front{background-color:#121213}.tile-back{transform:rotateX(180deg)}.tile .tile-front{border-color:#3a3a3c}.tile.filled .tile-front{border-color:#565758;animation:pop .1s ease-in-out}.tile.revealing .tile-inner{transform:rotateX(180deg)}.tile.correct .tile-back{background-color:#538d4e;border-color:#538d4e}.tile.present .tile-back{background-color:#b59f3b;border-color:#b59f3b}.tile.absent .tile-back{background-color:#3a3a3c;border-color:#3a3a3c}.tile.correct:not(.revealing) .tile-front,.tile.correct:not(.revealing) .tile-back{background-color:#538d4e;border-color:#538d4e}.tile.present:not(.revealing) .tile-front,.tile.present:not(.revealing) .tile-back{background-color:#b59f3b;border-color:#b59f3b}.tile.absent:not(.revealing) .tile-front,.tile.absent:not(.revealing) .tile-back{background-color:#3a3a3c;border-color:#3a3a3c}.tile.correct:not(.revealing) .tile-inner,.tile.present:not(.revealing) .tile-inner,.tile.absent:not(.revealing) .tile-inner{transform:rotateX(180deg)}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}@media (max-width: 500px){.tile{width:52px;height:52px}.tile-front,.tile-back{font-size:1.6rem}}@media (max-width: 380px){.tile{width:44px;height:44px}.tile-front,.tile-back{font-size:1.4rem}}.row{display:flex;gap:5px}.row.shake{animation:shake .5s ease-in-out}.row.initial-row{position:relative}.row.initial-row:before{content:"⭐";position:absolute;left:-30px;top:50%;transform:translateY(-50%);font-size:1.2rem}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-5px)}20%,40%,60%,80%{transform:translate(5px)}}@media (max-width: 500px){.row{gap:4px}.row.initial-row:before{left:-24px;font-size:1rem}}.board{display:flex;flex-direction:column;gap:5px;padding:10px 10px 10px 40px}@media (max-width: 500px){.board{gap:4px;padding-left:30px}}.keyboard{display:flex;flex-direction:column;gap:8px;width:100%;max-width:500px;padding:0 8px;box-sizing:border-box}.keyboard-row{display:flex;justify-content:center;gap:6px}.key{height:58px;min-width:43px;padding:0;border:none;border-radius:4px;background-color:#818384;color:#fff;font-size:13px;font-weight:700;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .1s ease;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.key:hover{opacity:.9}.key:active{transform:scale(.95)}.key.wide{min-width:65px;font-size:12px}.key.correct{background-color:#538d4e}.key.present{background-color:#b59f3b}.key.absent{background-color:#3a3a3c}.key svg{width:24px;height:24px}@media (max-width: 500px){.keyboard{padding:0 4px;gap:6px}.keyboard-row{gap:4px}.key{height:50px;min-width:32px;font-size:12px}.key.wide{min-width:50px;font-size:10px}}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease}.modal-content{background-color:#1a1a1b;border-radius:8px;padding:32px;max-width:400px;width:90%;text-align:center;position:relative;animation:slideUp .3s ease;border:1px solid #3a3a3c}.modal-close{position:absolute;top:12px;right:12px;background:none;border:none;font-size:24px;color:#818384;cursor:pointer;padding:4px 8px;line-height:1}.modal-close:hover{color:#fff}.modal-title{color:#fff;font-size:1.5rem;margin:0 0 16px}.modal-message{color:#d7dadc;font-size:1.1rem;margin:0 0 24px}.stats{display:flex;justify-content:center;gap:32px;margin-bottom:24px}.stat{display:flex;flex-direction:column;align-items:center}.stat-value{font-size:2rem;font-weight:700;color:#fff}.stat-label{font-size:.75rem;color:#818384;text-transform:uppercase}.share-button{background-color:#538d4e;color:#fff;border:none;border-radius:4px;padding:14px 32px;font-size:1rem;font-weight:700;cursor:pointer;transition:background-color .2s ease;text-transform:uppercase}.share-button:hover{background-color:#6aaa64}.modal-note{color:#818384;font-size:.85rem;margin:20px 0 0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.wordle{display:flex;flex-direction:column;align-items:center;min-height:100vh;background-color:#121213;color:#fff;padding:20px}.wordle-header{text-align:center;margin-bottom:20px;border-bottom:1px solid #3a3a3c;width:100%;max-width:500px;padding-bottom:10px}.wordle-header h1{margin:0;font-size:36px;font-weight:700;letter-spacing:.01em}.date{font-size:14px;color:#818384;margin-top:5px}.message{position:fixed;top:80px;background-color:#fff;color:#000;padding:12px 20px;border-radius:8px;font-weight:600;z-index:1000;animation:fadeInOut 1.5s ease-in-out}@keyframes fadeInOut{0%{opacity:0;transform:translateY(-10px)}10%,90%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}.skill-indicator{background:linear-gradient(135deg,#6366f1,#8b5cf6);padding:12px 24px;border-radius:12px;margin-bottom:20px;display:flex;align-items:center;gap:8px;box-shadow:0 4px 6px #0000004d;animation:slideIn .5s ease-out}.skill-label{font-size:14px;font-weight:600;color:#e0e0e0}.skill-value{font-size:20px;font-weight:700;color:#fff;background:#fff3;padding:4px 12px;border-radius:6px}.skill-hint{font-size:12px;color:#d0d0d0;font-style:italic}@keyframes slideIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}