body.end { overflow: hidden; }
main { width: fit-content; margin: 50px auto; user-select: none; }
section { border: 1px solid #0000AA; background: #EEEEEE; padding: 1em; margin-bottom: 1em; }
h1 { font: bold 1.7rem Verdana,sans-serif; margin: 0 0 1em 0; }
h2 { font: bold 1.3rem Verdana,sans-serif; margin: 0 0 1em 0; }

#input input { width: 100%; box-sizing: border-box; border: 1px solid #AAAAAA; font: bold 50px monospace; text-transform: uppercase; text-align: center; }
#hints { position: relative; transition: opacity 1s; }
body.end #hints { opacity: 0; }
#star { display: none; position: absolute; top: 1em; right: 1em; cursor: pointer; }
#star.show { display: block; }
#tools { margin-bottom: 2em; }
#codes { position: relative; width: calc(15 * 49px); height: calc(25 * 49px); transition: width 1s; }
#codes.show-length { width: calc(16 * 49px); }
#codes span { position: absolute; top: 0; left: 0; width: 50px; height: 50px; box-sizing: border-box; border: 1px solid #AAAAAA; font: bold 50px/40px monospace; text-align: center; padding: 0.1em; transition: all 1s; }
#codes span.length { display: none; border-color: transparent; font: bold 20px monospace; text-align: right; padding: 13px; }
#codes.show-length span.length { display: block; animation: show 1s; }
#codes.no-border span { border-color: transparent; }

@keyframes show {
  0% { opacity: 0; }
  40% { opacity: 0; }
  100% { opacity: 1; }
}