@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&family=Noto+Sans+JP:wght@400;700&family=Noto+Sans+KR:wght@400;700&family=Ubuntu:wght@400;700&display=swap');

* { box-sizing: border-box; }
*[lang=en] * { font-family: 'Ubuntu', sans-serif; }
*[lang=ko] * { font-family: 'Noto Sans KR', sans-serif; }
*[lang=ja] * { font-family: 'Noto Sans JP', sans-serif; }
*[lang=en] code { font-family: 'Inconsolata', monospace; }
*[lang=ko] code { font-family: 'Inconsolata', 'Noto Sans KR', monospace; }
*[lang=ja] code { font-family: 'Inconsolata', 'Noto Sans JP', monospace; }

html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; }
a { color: #090; text-decoration: none; transition: all 0.2s; }
a:hover { color: #0c0; text-decoration: underline; }
button { font-size: 1rem; padding: 2px 4px; }
code { font-size: 0.95em; background-color: #ddd; color: #f30; padding: 2px 4px; border-radius: 4px; }
p { margin: 4px 0; }

div.wrapper {
  padding: 0 8px; width: 35em; max-width: 100%; height: 100%;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  transition: all 0.2s;
}
div.wrapper.keyboard-hidden { height: calc(100% + 260px); overflow: hidden; }
div.main-screen { width: 100%; height: calc(100% - 120px); display: flex; flex-direction: column; justify-content: center; align-items: center; }

div.wrapper.overlap { width: 100%; min-width: 100%; background-color: rgba(0, 0, 0, 0.5); }
div.wrapper-box {
  padding: 8px; background-color: #fff; width: calc(35em - 16px); max-width: calc(100% - 16px); max-height: calc(100% - 32px); border-radius: 8px;
  font-size: 1rem; text-align: justify; line-height: 1.5; overflow-y: auto;
}
div.wrapper-box p { text-indent: 1rem; }

div.buttons { display: flex; flex-direction: row; justify-content: center; }
div.buttons button { margin: 0 2px; }

div.keyboard {
  width: 100%; height: 260px; background-color: #eee; position: relative;
}
div.keyboard div { width: 100%; height: 100%; display: flex; flex-direction: row; flex-wrap: wrap; }
div.keyboard button {
  width: calc(100% / 3); height: 52px; font-size: 1.5rem; padding: 0;
  color: #111; background-color: rgba(0, 0, 0, 0); border: 0;
  display: flex; flex-direction: row; align-items: center; justify-content: center;
}
div.keyboard button.space { width: 100%; }
div.keyboard button div.inner {
  border: 1px solid #666; border-radius: 8px; width: calc(100% - 8px); height: calc(100% - 8px);
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  transition: all 0.2s;
}
div.keyboard button:active div.inner { background-color: rgba(0, 0, 0, 0.2); }
div.keyboard button.hide {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  display: flex; justify-content: center; align-items: center;
  width: 20%; height: 30px; margin: 0;
  border: 0; border-radius: 0; border-top-left-radius: 8px; border-top-right-radius: 8px;
  background-color: #eee;
}
div.keyboard button.hide div {
	width: 0; height: 0; transition: all 0.2s; transform: rotate(0);
	border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 12px solid #ccc;
}
div.wrapper.keyboard-hidden div.keyboard button.hide div { transform: rotate(180deg); }

div.keyboard div.advanced { display: grid; grid-template-columns: repeat(5, 20%); grid-template-rows: repeat(5, 52px); }
div.keyboard div.advanced button { width: 100%; height: 100%; }
div.advanced button.enter { grid-row: 3 / 5; grid-column: 5 / 6; }
div.advanced button.space { grid-column: 1 / 5; }
div.keyboard button.end { color: #00e; }
div.keyboard button.end div:after { content: '␣'; }

#composite { font-size: 5rem; margin: 1rem 0; }
#composite.wrong { animation: wrong 0.4s linear 0s 1; }
input { font-size: 1rem; }

#shown-factors { font-size: 2rem; margin-bottom: 1rem; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; }
#shown-factors>div::before { content: '\00a0× '; color: #666; }
#shown-factors>div:first-child::before { content: '= '; color: #666; }
#shown-factors>div:last-child { color: blue; }

#rank-bar { width: calc(100% - 24px); position: relative; }
#rank-bar>div { width: 100%; display: flex; flex-direction: row; height: 32px; position: absolute; transition: all 0.1s; }
:is(#rank-bar,#chat-show)>div>div:first-child { width: 100px; padding: 0 8px; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; }
#rank-bar>div.me>div:first-child { font-weight: bold; }
#rank-bar>div>div:last-child { width: calc(100% - 100px); text-align: right; position: relative; display: flex; justify-content: center; align-items: center; }
div.score-bar {
  width: 0%; height: 24px; background-color: #fc0; border-radius: 8px;
  transform: translateY(-50%); transform-origin: left center; position: absolute; top: 50%; left: 0; z-index: -1;
  transition: all 0.1s;
}
div.score-num { z-index: 1; }

#timer { width: 100%; height: 64px; }
#timer>div {
  width: 100%; height: 16px; background-color: red;
  border-radius: 8px; transition: width 0.1s linear;
}

#chat-show-wrapper {
  display: flex; flex-direction: column-reverse; overflow: hidden; margin: 16px 0 24px 0;
  width: calc(100% - 16px); max-height: 10rem;
  font-family: 'Ubuntu', 'Noto Sans KR', 'Noto Sans JP', sans-serif;
}
#chat-show {
  font-size: 1rem; width: 100%; max-height: calc(100% - 1.5em);
  display: flex; flex-direction: column; justify-content: flex-end;
}
#chat-show>div { display: flex; flex-direction: row; justify-content: flex-end; margin-top: 4px; }
#chat-show>div>div:first-child { display: flex; align-items: flex-start; justify-content: flex-end; }
#chat-show>div>div:first-child::after { content: ':'; }
#chat-show>div>div:last-child { width: calc(100% - 100px); text-align: justify; }
#chat-show-wrapper div.border {
  margin: 0; height: 1.5em; width: 100%;
  background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}

div.loading {
  width: 100%; height: 100%; background-color: #7f7f7f; position: fixed; left: 0; top: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
div.rotating { width: 64px; height: 64px; animation: binglebangle 0.5s linear 0s infinite; }
:is(div.rotating-left, div.rotating-right) { width: 32px; height: 32px; border: 4px solid #fff; border-right: 0; }
div.rotating-left { border-top-left-radius: 32px; border-bottom: 0; }
div.rotating-right { border-bottom-left-radius: 32px; border-top: 0; }

div.top-left { position: fixed; top: 8px; left: 8px; color: #999; }
div.top-right { position: fixed; right: 8px; top: 8px; }
button#help { width: 32px; height: 32px; border: 0; background-color: rgba(0, 0, 0, 0); background-image: url(./question-circle.svg); }
button#settings { width: 32px; height: 32px; border: 0; background-color: rgba(0, 0, 0, 0); background-image: url(./gear.svg); }
button#settings:hover { animation: binglebangle 2s linear 0s infinite; }

div.help { font-size: 0.9rem; color: #666; margin: 8px 0 8px 0.5rem; }
div.help ul { margin: 0; padding: 0; padding-left: 1.5rem; }

@keyframes binglebangle {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes glow {
  from { opacity: 1; }
  to { opacity: 0.5; }
}

@keyframes wrong {
  from { color: red; }
  to { color: black; }
}