*,*:before,*:after{box-sizing:border-box}html,body{margin:0;font-family:sans-serif;padding:16px 0;font-size:18px;background-color:#eff3f6;color:#003049;font-family:Lato,sans-serif;font-weight:400;font-style:normal}body{transition:padding-bottom .3s ease}*{box-sizing:border-box}input{font-size:16px;font-family:Lato,sans-serif;font-weight:400;font-style:normal;display:block;box-sizing:border-box;border:1px solid #ccc;border-radius:4px;padding:8px;line-height:2;&:focus{border-color:#00afb9;outline:1px solid #00afb9}&.hidden{position:absolute;top:180px;left:-9999px}}main,.modal-container{width:460px;max-width:100%;margin:0 auto}h1{text-align:center;margin:0 0 16px;font-family:Lobster,sans-serif;font-weight:400;font-style:normal;font-size:72px;color:#00afb9}.game-container{position:relative;background-color:#fff;padding:32px;border-radius:16px}.ui-container{padding:32px 0;display:flex;flex-direction:column;gap:8px;&.names{width:80%;margin:0 auto;padding-top:48px}&.submit{align-items:center}&.warning{padding-bottom:0}}.ui-container,.modal-content{button{padding:12px 24px;font-size:16px;font-family:Lato,sans-serif;font-weight:700;font-style:normal;color:#fff;background-color:#00afb9;border:none;border-radius:4px;cursor:pointer;box-shadow:0 2px #008c8f;&:hover:not(:disabled){background-color:#00a0a5}&:active:not(:disabled){transform:translateY(1px);box-shadow:0 1px #008c8f}&:disabled{background-color:#adb5bd;color:#ced4da;box-shadow:0 2px #999;cursor:not-allowed}}}.link-container{display:flex;font-size:10px;background-color:#f8f9fa;padding:8px;border-radius:4px;justify-content:space-between;align-items:center;.link{min-width:0;word-break:break-all;padding-right:8px}button svg path{fill:#fff}}.warning{color:#ff6b6b;border-radius:4px;text-align:center}.guess-row{padding:8px 0}.letter-row{display:flex;justify-content:space-between;div{width:17%;aspect-ratio:1 / 1;display:flex;align-items:center;justify-content:center;border:1px solid #ccc;border-radius:4px;font-size:24px;font-weight:700;text-transform:uppercase;background-color:#fff;transform:rotateY(0);animation-fill-mode:forwards;animation-iteration-count:1;&.turn-start{animation:turn-start .25s ease-in}&.turn-complete{animation:turn-complete .5s ease-out}&.rim{border:2px solid #aaa}&.invalid{border:2px solid #a70000}&.incorrect.turn-complete{background-color:#ccc;border-color:#ccc;color:#fff}&.correct.turn-complete{background-color:#00c9a7;border-color:#00c9a7;color:#fff}&.misplaced.turn-complete{background-color:#ff6b6b;border-color:#ff6b6b;color:#fff}&.del0.turn-start{animation-delay:0s}&.del1.turn-start{animation-delay:.2s}&.del2.turn-start{animation-delay:.4s}&.del3.turn-start{animation-delay:.6s}&.del4.turn-start{animation-delay:.8s}&.caret:after{content:"";display:block;width:3px;height:50%;background-color:#666;animation:blink 2s infinite}}}.tip-message-container{position:fixed;left:0;top:-10px;height:100vh;width:100vw;display:flex;justify-content:center;align-items:center;pointer-events:none;opacity:0;transition:opacity .3s ease,top .3s ease;&.appear{opacity:1;top:0}&.disappear{opacity:0;top:-10px}}.tip-message{background-color:#303030;color:#fff;padding:12px 36px;font-size:14px;border-radius:4px;text-align:center;display:inline-block}@keyframes blink{0%,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes turn-start{0%{transform:rotateY(0)}to{transform:rotateY(90deg)}}@keyframes turn-complete{0%{transform:rotateY(-90deg)}to{transform:rotateY(0)}}.modal{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0000;display:flex;justify-content:center;align-items:center;.modal-container{position:relative;background-color:#fff;padding:32px;border-radius:16px;min-height:70vh;margin-top:10px;opacity:0;transition:margin-top .3s ease .1s,opacity .3s ease .1s}&.appear{background-color:#00000080;.modal-container{margin-top:0;opacity:1}}.modal-closer{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;background-color:#0003;color:#fff;display:flex;justify-content:center;align-items:center;font-size:18px;cursor:pointer;border:none;&:hover{background-color:#0000004d}}.modal-content{padding-top:32px;line-height:1.5;text-align:center}.modal-button-container{padding-top:16px}}