body,html{height:100%;color:#fff;background-color:#111;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:calc(var(--app-width) / 30)}*,body,html{margin:0;padding:0}.button{cursor:pointer;border-radius:6px;border:2px solid #9ad1d4;background-color:#408b8f;text-align:center;vertical-align:middle;padding:calc(var(--app-width) / 48) 0;margin:0 calc(var(--app-width) / 64)}.toolbar-button{padding:.5vw 1vw;cursor:pointer}.container{max-width:var(--app-width);min-height:var(--min-height);height:100%;max-height:var(--max-height);z-index:1;margin:0 auto;display:flex;flex-direction:column;justify-content:space-between;color:var(--white);background-color:var(--black)}.container>*{padding:calc(var(--app-width) / 64)}.footer{display:flex;flex-direction:row;justify-content:stretch}.footer>*{flex:1}.header{display:flex;flex-direction:row;justify-content:stretch;align-items:center;border-bottom:calc(var(--app-width) / 256) solid var(--gray);padding:calc(var(--app-width) / 64)}.header .center{flex:1;text-align:center}.header .right{text-align:right}.modal{position:absolute;z-index:1000;transform:translateZ(1000px);transform-style:preserve-3d;width:var(--modal-width);min-height:var(--modal-min-height);max-height:var(--modal-max-height);top:calc(var(--modal-padding) / 2);left:calc(50vw - (var(--modal-width) / 2) - (var(--app-width) / 256));background-color:#333333f6;border:calc(var(--app-width) / 128) solid #666;border-radius:calc(var(--app-width) / 32)}.modal.hidden{display:none}.modal .content{margin:20px;height:calc(100% - 20px);display:flex;flex-direction:column}.modal .content .header{padding-top:0;margin-top:calc(var(--app-width) / -32)}.modal .content .body{flex:1}.modal .content .body>:not(.game){padding-top:20px}.modal .content .body>:last-child:not(.game){padding-bottom:20px}.modal .content .body .word.tilt-back:after{background-image:linear-gradient(0deg,#3330,#333 35%)}.modal .content .body .word.tilt-forward:after{background-image:linear-gradient(180deg,#3330,#333 35%)}.modal .content .body .word .letter{height:calc(var(--app-width) / 8);padding-top:0;padding-bottom:calc(var(--app-width) / 64)}.modal .content .body .word.tilt-back .letter,.modal .content .body .word.tilt-forward .letter{margin-left:calc(var(--app-width)/-128)}.modal .content .body .word.tilt-back .letter{margin-bottom:calc(var(--app-width)/-20)}.modal .content .body .word.tilt-forward .letter{margin-top:calc(var(--app-width)/-20)}.controls{display:flex;flex-direction:row}.controls .control{text-align:center;flex:1;font-size:calc(var(--app-width) / 24);height:calc(var(--app-width) / 16);padding-top:calc(var(--app-width) / 24);padding-bottom:calc(var(--app-width) / 32);cursor:pointer}.controls .control.disabled{color:var(--dark-gray);cursor:default}.details{display:flex;flex-direction:row;font-size:calc(var(--app-width) / 16);text-align:center;padding-top:calc(var(--app-width) / 8)}.details>*{flex:1}.label{text-transform:uppercase;font-size:50%;color:#999;margin-bottom:calc(var(--app-width) / -128)}.graph .row{display:flex;flex-direction:row;align-items:center}.graph .row>*{margin-left:calc(var(--app-width) / 96);margin-right:calc(var(--app-width) / 96)}.graph .row .guess{font-family:var(--monospaced-font);font-weight:700}.graph .row .line{display:inline-block;border-top-left-radius:calc(var(--app-width) / 256);border-bottom-left-radius:calc(var(--app-width) / 256);border-top-right-radius:calc(var(--app-width) / 64);border-bottom-right-radius:calc(var(--app-width) / 64);background-color:var(--light-gray);height:calc(var(--app-width) / 48);min-width:calc(var(--app-width) / 256)}.graph .row .line.active{background-color:var(--active)}.pointer{cursor:pointer}.upper{text-transform:uppercase}.text-muted{color:var(--gray)}.small{font-size:75%}.xsmall{font-size:62.5%}.xxsmall{font-size:50%}.xxxsmall{font-size:37.5%}.word{display:flex;flex-direction:row}.word .letter{text-align:center;flex:1;border:calc(var(--app-width) / 128) solid var(--light-gray);border-radius:calc(var(--app-width) / 32);background-color:var(--white);color:var(--black);font-family:var(--monospaced-font);xfont-weight:bold;font-size:calc(var(--app-width) / 8);height:calc(var(--app-width) / 6);padding-top:calc(var(--app-width) / 32);margin:calc(var(--app-width) / 128)}.word .letter.changed{xbackground-color:var(--active)}.word .letter.hidden{visibility:hidden}.word.guess .letter.success{background-color:var(--green)!important}.word.guess .letter.incorrect{background-color:var(--red)!important;color:var(--white)}.word.guess.correct .letter{background-color:var(--green)!important}.word.guess.incorrect .letter{background-color:var(--red)!important;color:var(--white)}.word.tilt-back,.word.tilt-forward{position:relative}.word.tilt-back:after,.word.tilt-forward:after{content:"";position:absolute;z-index:2;top:0;bottom:0;left:0;width:105%;height:100%;margin-left:calc(var(--app-width)/-32);margin-right:calc(var(--app-width)/-32);pointer-events:none}.word.tilt-back .letter,.word.tilt-forward .letter{margin-left:calc(var(--app-width)/-64);margin-right:calc(var(--app-width)/32)}.word.tilt-back .letter{transform:rotateX(73deg) skewX(10deg);margin-bottom:calc(var(--app-width)/-16)}.word.tilt-back:after{background-image:linear-gradient(to top,var(--black-opaque),var(--black-transparent) 35%)}.word.tilt-forward .letter{transform:rotateX(-73deg) skewX(-10deg);margin-top:calc(var(--app-width)/-16)}.word.tilt-forward:after{background-image:linear-gradient(to bottom,var(--black-opaque),var(--black-transparent) 35%)}:root{--black:#111;--black-transparent:#111;--black-opaque:#1110;--white:#fff;--gray:#999;--light-gray:#ccc;--dark-gray:#333;--green:#62c370;--red:#e73838;--active:#9ad1d4;--app-max-width:600px;--app-width:min(100vw,var(--app-max-width));--min-height:var(--app-width);--max-height:calc(var(--app-width) * 16 / 9);--modal-padding:calc(var(--app-width) / 8);--modal-width:calc(var(--app-width) - var(--modal-padding));--modal-min-height:calc(var(--min-height) - var(--modal-padding));--modal-max-height:calc(var(--max-height) - var(--modal-padding));--monospaced-font:"Courier New",Courier,monospace}