*,*:before,*:after{box-sizing:border-box}*{margin:0;padding:0}html,body,#app{height:100%}html{overflow-y:scroll;--game-spacing: 32px;--header-height: 4rem;--color-success: hsl(150deg 70% 30%);--color-warning: hsl(50deg 100% 30%);--color-error: hsl(0deg 70% 45%);--color-gray-100: hsl(0deg 0% 10%);--color-gray-300: hsl(0deg 0% 30%);--color-gray-500: hsl(0deg 0% 50%);--color-gray-700: hsl(0deg 0% 70%);--color-gray-900: hsl(0deg 0% 90%)}body{font-family:sans-serif}@media (max-height: 600px){body{--game-spacing: 8px}}button{margin:0;padding:0;border:none;background:transparent;cursor:pointer;text-align:left;color:inherit}.wrapper{display:flex;flex-direction:column;min-height:100%}header{display:flex;height:var(--header-height);border-bottom:1px solid var(--color-gray-700);color:var(--color-gray-300)}header .side{width:var(--header-height);display:grid;place-content:center}h1{flex:1;font-size:2rem;line-height:var(--header-height);text-align:center}@media (max-width: 25rem){h1{font-size:1.25rem}}.game-wrapper{flex:1;display:flex;flex-direction:column;gap:var(--game-spacing);padding:var(--game-spacing) 32px;margin:0 auto;min-width:250px;max-width:min(500px,58vh,100%)}.guess-results{flex:1;display:flex;flex-direction:column;justify-content:center}.guess{display:flex;gap:4px;margin-bottom:4px}.cell{position:relative;width:20%;display:grid;place-content:center;aspect-ratio:1 / 1;border:2px solid var(--color-gray-700);border-radius:var(--radius);font-size:2rem}.guess:first-of-type .cell:first-of-type{--radius: 4px 0px 0px 0px}.guess:first-of-type .cell:last-of-type{--radius: 0px 4px 0px 0px}.guess:last-of-type .cell:last-of-type{--radius: 0px 0px 4px 0px}.guess:last-of-type .cell:first-of-type{--radius: 0px 0px 0px 4px}.cell.correct{background:var(--color-success);border-color:var(--color-success);color:#fff}.cell.incorrect{background:var(--color-gray-300);border-color:var(--color-gray-300);color:#fff}.cell.misplaced{background:var(--color-warning);border-color:var(--color-warning);color:#fff}.guess-input-wrapper{display:flex;flex-direction:column;gap:8px;height:6.75rem}.guess-input-wrapper label{font-size:1.25rem}.guess-input-wrapper input{display:block;width:100%;font-size:2rem;border:2px solid var(--color-gray-300);border-radius:4px;padding:8px 16px;outline-offset:4px}.banner{position:fixed;left:0;right:0;bottom:0;width:100%;max-width:600px;margin:0 auto;padding:32px;text-align:center;animation:slideUp .75s cubic-bezier(0,.72,.24,1.02);border-radius:4px 4px 0 0;will-change:transform}.happy.banner{background:var(--color-success);color:#fff}.sad.banner{background:var(--color-error);color:#fff}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}