:root{--bg-color: #1e293b;--title-color: rgb(142, 133, 120);--tile-color: black;--tile-base-color: black;--tile-guessed-gray: rgb(74, 63, 63);--tile-gray: rgb(100, 100, 100);--tile-green: rgb(37, 175, 37);--tile-yellow: rgb(189, 189, 10);--play-again-button-color: rgb(18, 18, 193);--tile-text-color: white;--modal-background-color: rgba(199, 131, 5, .95)}[data-theme=light]{--bg-color: rgb(71, 173, 221);--title-color: blue;--tile-base-color: white;--tile-color: white;--tile-gray: rgb(209, 184, 184);--tile-guessed-gray: rgb(100, 100, 100);--tile-green: rgb(70, 180, 70);--tile-yellow: yellow;--play-again-button-color: blue;--tile-text-color: black;--modal-background-color: rgba(255, 165, 0, .95)}body{background-color:var(--bg-color);margin:0}body.bg-flash-red{animation:bgPulseRed .75s ease-in-out}@keyframes bgPulseRed{0%{background-color:var(--bg-color)}50%{background-color:purple}to{background-color:var(--bg-color)}}.main{width:fit-content;margin:0;display:flex;flex-direction:column;align-items:center}#app-header{display:flex;justify-content:space-between;align-items:center;width:clamp(226px,calc(85vw + 26px),326px);margin-top:10px}#app-title{font-family:Pacifico,cursive;justify-self:center;margin:0;color:var(--title-color)}.header-toggle{justify-self:end;display:flex;align-items:center}.header-trio{display:flex;align-items:center;gap:4px}#board-and-keyboard{display:flex;flex-direction:column;align-items:center}.progress-bar{width:100%;height:2rem}.progress-bar.urgent{accent-color:red}.board-container{position:relative;display:inline-flex;flex-direction:column;align-items:center;width:fit-content;margin:0 auto}.line{display:flex;justify-content:center;align-items:center;gap:4px}.tile{width:clamp(40px,17vw,60px);height:clamp(40px,17vw,60px);border:1px solid #000;display:inline-flex;align-items:center;justify-content:center;margin-bottom:4px;background-color:var(--tile-color);transition:background-color .2s ease;transform-style:preserve-3d}.tile .letter{color:var(--tile-text-color);margin:0}.letter{padding:0;font-size:24px;font-weight:700;text-align:center;transition:color .2s ease}.tile.gray{--tile-color: var(--tile-gray)}.tile.green{--tile-color: var(--tile-green)}.tile.yellow{--tile-color: var(--tile-yellow)}.play-again-button{background-color:var(--play-again-button-color);color:#fff;border:none;border-radius:5px;padding:10px 20px;margin-top:10px;cursor:pointer;text-transform:uppercase}.play-again-button:hover{background-color:#333}.tile.animate{animation:flipReveal .4s ease-in-out forwards}@keyframes flipReveal{0%{transform:rotateX(0);background-color:var(--tile-base-color)}49%{transform:rotateX(90deg);background-color:var(--tile-base-color)}50%{transform:rotateX(90deg);background-color:var(--tile-color)}to{transform:rotateX(0);background-color:var(--tile-color)}}@keyframes letterReveal{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.button.animate{animation:keyFlipReveal .4s ease-in-out forwards}@keyframes keyFlipReveal{0%{transform:rotateX(0);background-color:var(--prev-color, rgb(209, 184, 184))}49%{transform:rotateX(90deg);background-color:var(--prev-color, rgb(209, 184, 184))}50%{transform:rotateX(90deg);background-color:var(--next-color, var(--tile-color))}to{transform:rotateX(0);background-color:var(--next-color, var(--tile-color))}}.keyboard-container{width:100vw;margin:0 auto}.keyboard{width:100vw;margin:0 auto;display:flex;flex-direction:column;justify-content:center;align-items:center}.keyboard-row{width:100vw;display:flex;flex-direction:row;justify-content:center;align-items:center}.button{padding:0;border:1px solid #000;display:inline-flex;align-items:center;justify-content:center;--margin-size: 2px;margin:var(--margin-size);background-color:var(--tile-color);color:#000;--scale: 1;--w: clamp(0px, var(--widthStyle), 40px);--derived-width: calc(var(--w) - var(--margin-size) * 2);width:calc(var(--derived-width) * var(--scale));height:calc(var(--derived-width) * 45 / 35);border-radius:5px;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:clamp(20px,2vw,20px)}.button[aria-label="Enter key"],.button[aria-label="Backspace key"]{--scale: 1.5;background-color:#b15c1c}.button[aria-label="Enter key"]{font-size:clamp(0px,3vw,12px);font-weight:700;background-color:#36ee36}.button.button-green{--tile-color: var(--tile-green)}.button.button-yellow{--tile-color: var(--tile-yellow)}.button.button-gray{--tile-color: var(--tile-gray)}.button.button-dark-gray{--tile-color: var(--tile-guessed-gray)}.modal{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:max-content;height:max-content;box-sizing:border-box;padding:20px;border:3px solid #000;border-radius:30px;background-color:var(--modal-background-color);box-shadow:0 4px 12px #000;text-align:center}.switch{justify-self:end;position:relative;display:inline-block;width:60px;height:34px}.tooltip{position:relative;display:inline-flex;margin-right:4px}.tooltip-icon{width:20px;height:20px;display:block}.tooltip-text{position:fixed;left:50%;top:min(36%,260px);text-align:left;width:min(16rem,calc(100vw - 40px));max-width:calc(100vw - 40px);padding:6px 10px;border-radius:6px;background:rgba(27,26,26,.95);color:orange;font-size:20px;transform:translate(-50%,-50%);opacity:0;visibility:hidden;pointer-events:none;z-index:10;transition:opacity .3s ease-in,visibility .3s ease-in}.tooltip:hover .tooltip-text,.tooltip:focus-within .tooltip-text{opacity:1;visibility:visible}.language-dropdown select{border:1px solid var(--tile-base-color);border-radius:10px;background-color:var(--bg-color);color:var(--tile-text-color);padding:7px 0 7px 4px;font-size:12px;cursor:pointer;font-family:Pacifico,cursive}#timer-toggle,#theme-toggle{font-size:20px;justify-self:end;cursor:pointer;background-color:var(--bg-color);border:1px solid var(--tile-base-color);border-radius:10px;padding:5px 10px}#theme-toggle:hover,#timer-toggle:hover,.language-dropdown select:hover{background-color:#ffffff1a}