body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}body{font-family:var(--display-font);font-style:normal;font-weight:400}body p{font-family:var(--body-font);font-optical-sizing:auto;font-weight:300}.modal-container{background-color:#ffffffe6;bottom:0;display:flex;justify-content:center;left:0;opacity:0;pointer-events:none;position:fixed;right:0;top:0;transition:opacity .3s ease;z-index:1000}.modal-container:has(.modal--open){opacity:1;pointer-events:all}.modal{align-items:center;border-radius:5px;display:flex;flex-direction:column;margin-top:100px;max-height:90%;max-width:90%;overflow:auto;padding:20px;text-align:center}.modal p.summary{text-wrap:balance;text-wrap-style:balanced;max-width:500px}.modal .modal-close{background:#0000;border:none;color:#0000;cursor:pointer;outline:none;position:absolute;right:30px;top:30px;-webkit-user-select:none;user-select:none}.modal .modal-close:after{color:var(--off-black);content:"✖";font-size:1.5rem}.share-button{background-color:var(--green);border:none;border-radius:30px;color:#f0f0f0;font-family:var(--display-font);font-size:1.2rem;font-weight:600;margin:.5rem;padding:.5rem 1rem;transition:background-color .3s ease,color .3s ease}.share-button:hover{background-color:#237d23;color:#f0f0f0}.copied-bubble{animation:fadeOut .8s forwards;background:#000;border-radius:30px;color:#fff;display:inline-block;padding:.5rem 1rem;pointer-events:none;position:absolute;-webkit-user-select:none;user-select:none;width:8em}@keyframes fadeOut{0%{opacity:1;transform:translateY(-1rem)}to{opacity:0;transform:translateY(-2rem)}}.stats{grid-gap:.2em;display:grid;font-family:var(--display-font);gap:.2em;grid-template-columns:repeat(4,1fr);margin-bottom:2em;max-width:400px}.stats .stat .stat-value{font-size:2rem;font-weight:600;margin-bottom:.3em}.stats .stat .stat-label{text-wrap:balance;font-family:var(--body-font)}.game--from-tutorial{animation:fadeIn .3s ease forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.loading{align-items:center;background-color:var(--gray-1);display:flex;font-family:var(--display-font);font-size:calc(min(7vw, 7vh));font-weight:600;height:100vh;height:100dvh;justify-content:center;position:fixed;width:100vw;z-index:10000}.loading h1{animation:friendly-spin 1s infinite}.loading.hidden{background-color:initial;pointer-events:none;transition:background-color .3s ease;transition-delay:.2s}.loading.hidden h1{opacity:0;transition:opacity .3s ease}footer{font-family:var(--body-font);margin-top:.5em;text-align:left}footer,footer a{color:var(--gray-4)}footer a{text-decoration:none}footer a:hover{text-decoration:underline}footer a,footer span{margin-left:1em}.penny-ad{background:url(/Mutatle/static/media/penny-jump.ec2292c5e8c37b7994d8.gif);background-repeat:no-repeat;background-size:contain;bottom:3px;display:none;font-size:0;height:100px;position:fixed;right:3px;width:50px}@media (min-width:1200px){.penny-ad{display:block}}@keyframes friendly-spin{0%{transform:rotate(0deg)}80%{transform:rotate(1turn)}to{transform:rotate(1turn)}}.error{align-items:center;background-color:var(--gray-1);display:flex;font-family:var(--display-font);font-size:calc(min(3vw, 3vh));font-weight:600;height:100vh;height:100dvh;justify-content:center;position:fixed;width:100vw}body{--green:#659b46;--yellow:#f0c142;--off-black:#333;--ghost-blue:#a2b3bf;--gray-1:#f8f9fa;--gray-2:#d9dfe4;--gray-3:#b7bfc5;--gray-4:#8c959f;--body-font:"DM Sans",sans-serif;--display-font:"Mate",serif;--letter-weight:bold;--display-font:"Rokkitt",serif}*{box-sizing:border-box}.game{--gap:5px;--w:calc(25vw - var(--gap)*3/4 - 5px);align-items:center;background-color:var(--gray-1);justify-content:center;margin:0 auto;max-width:1200px;min-height:100vh;min-height:100dvh;padding-bottom:8px;text-align:center;-webkit-text-align:center;-moz-text-align:center;-ms-text-align:center;width:100vw}.game h1{margin:0;padding:1em 0 0;text-align:center}.game p{text-wrap:balance;margin:0;max-width:100%;padding:0 15%}@media (min-width:500px){.game{--w:120px}}.game .mutator-stack{height:calc(10px + var(--w));margin:10px 0}.game .mutators{height:calc(var(--w)*3 + var(--gap)*2);margin-left:10px;margin-right:10px;position:relative;-webkit-user-select:none;user-select:none}@media (min-width:500px){.game .mutators{margin-left:calc(50% - var(--w)*2 - var(--gap)*2.5)}}.game .mutators .mutator-slot{align-items:center;aspect-ratio:1;background-color:initial;background:var(--gray-2);color:var(--gray-4);cursor:pointer;display:block;display:flex;font-family:var(--body-font);font-size:.9rem;font-weight:700;justify-content:center;overflow:hidden;padding:1em;position:absolute;text-align:center;width:calc(var(--w) + var(--gap))}@supports not (aspect-ratio:1){.game .mutators .mutator-slot{height:calc(var(--w) + var(--gap));width:calc(var(--w) + var(--gap))}}.game .mutators .mutator-slot+.mutator-slot:before{background:#000;background:linear-gradient(0deg,#0000 0,var(--gray-3) 50%,#0000 100%);content:"";height:var(--w);left:-1px;position:absolute;width:2px}.game .mutators .mutator-slot.first{border-bottom-left-radius:.5rem;border-top-left-radius:.5rem}.game .mutators .mutator-slot.last{border-bottom-right-radius:.5rem;border-top-right-radius:.5rem}.game .mutators .mutator{text-wrap:balance;align-items:center;aspect-ratio:1;background-color:#fff;border:1px solid var(--gray-3);border-radius:.5rem;color:var(--off-black);cursor:pointer;display:block;display:flex;font-family:var(--body-font);font-size:32px;font-weight:600;font-weight:700;height:var(--w);justify-content:center;overflow:hidden;padding:0 1em;position:absolute;text-align:center;transition:top .3s ease,left .3s ease,background-color 0s ease .25s,color 0s ease .25s,border-color 0s ease .25s;width:var(--w)}.game .mutators .mutator.mutator--correct{background-color:var(--green);border-color:var(--green);color:#fff}.game .mutators .mutator.mutator--wrong-place{background-color:var(--yellow);border-color:var(--yellow)}.game .mutators .mutator.mutator--incorrect{background-color:var(--off-black);border-color:var(--off-black);color:#fff}.game .mutators .mutator.mutator--flip{animation:flip .5s ease}.word{align-items:center;color:var(--off-black);display:flex;flex-direction:row;font-size:2rem;font-weight:700;gap:3px;justify-content:center;margin:.25em 0;max-width:100%;position:relative}.word+.word:before{background-color:#000;background:linear-gradient(90deg,#0000 0,var(--gray-3) 50%,#0000 100%);content:"";display:block;height:2px;left:100px;position:absolute;right:100px;top:-3px}.word.word--correct{color:var(--green)}.word.word--correct .letter{border-color:var(--green)!important}.word .letter-wrapper{max-width:2rem;overflow:hidden}.word .letter-wrapper:last-child{overflow:visible}.word .letter-wrapper:has(.letter--will-be-removed),.word .letter-wrapper:has(.letter--will-change-position),.word .letter-wrapper:has(.letter--will-change-value){overflow:visible}.word .letter-wrapper:has(.letter--was-changed){overflow:visible;z-index:10}.word .letter-wrapper:has(.letter--was-ghost){overflow:visible;z-index:10}.word .letter{background-color:#fff;border:1px solid var(--off-black);border-radius:.5rem;display:inline-block;font-size:1.5rem;font-weight:var(--letter-weight);height:2rem;line-height:1.25em;margin-right:.1em;position:relative;text-align:center;top:0;transform-origin:center center;transition:top .3s ease,transform .3s ease,color .2s ease,border-color .2s ease;width:2rem}.word .letter.letter--will-change-position{top:-.15em;transform:rotate(30deg);z-index:10}.word .letter.letter--will-change-value{top:-.15em;transform:translateY(-.15em);z-index:10}.word .letter.letter--will-be-removed{animation:vibrate .2s infinite;z-index:10}.word .letter.letter--ghost{border-color:var(--ghost-blue);color:var(--ghost-blue);z-index:10}.word .letter.letter--was-ghost{animation:pulse .5s ease;z-index:10}.word .letter.letter--was-changed{transform:scale(.8)}.word .letter.letter--bounce{z-index:10}@keyframes vibrate{0%{transform:translateX(0)}25%{transform:translateX(-.15rem)}50%{transform:translateX(0)}75%{transform:translateX(.15rem)}to{transform:translateX(0)}}@keyframes flip{0%{transform:rotateX(0deg)}50%{transform:rotateX(90deg)}to{transform:rotateX(0deg)}}@keyframes bounce{0%,60%{transform:translateY(0)}30%{transform:translateY(-.5rem)}to{transform:translateY(0)}}@keyframes change{0%{scale:1}50%{scale:2}to{scale:1}}@keyframes pulse{0%{scale:1}50%{scale:1.2}to{scale:1}}.tutorial{height:100vh;height:100dvh;margin:0 auto;max-width:1200px;overflow-x:hidden;position:relative;width:100vw}.tutorial .game{opacity:1;position:absolute;top:0;transition:opacity .3s ease,transform .3s ease}.tutorial .game.current{z-index:1000}.tutorial .game.future{opacity:.1;transform:translateX(100%);z-index:-10}.tutorial .game.past{opacity:.1;transform:translateX(-100%);z-index:-10}.tutorial .tutorial-footer{animation:left-right-wave 1s ease-in-out infinite;background:none;border:none;bottom:20px;color:var(--off-black);cursor:pointer;font-family:var(--display-font);font-size:1.3rem;font-weight:700;outline:none;position:absolute;right:20px;z-index:1000}.tutorial .tutorial-footer:hover{opacity:.8}.pretty{font-family:var(--display-font);font-size:110%;font-weight:700}@keyframes left-right-wave{0%{transform:translateX(0)}50%{transform:translateX(5px)}to{transform:translateX(0)}}
/*# sourceMappingURL=main.d5a404cc.css.map*/