+
+.guessing-game-monitor {
+ font-size: 5vw;
+ text-align: center;
+
+ .message-box {
+ display: inline-block;
+ padding: 0.5ex 1ex;
+ border-radius: 0.5ex;
+ background: rgba(0, 0, 0, 0.8);
+ }
+ .message-title {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+ .accepting-guesses .message-icon {
+ color: $warning;
+ }
+ .guessing-closed .message-icon {
+ color: $danger;
+ }
+ .message-text {
+ flex-grow: 1;
+ margin-left: 1ex;
+ margin-right: 1ex;
+ width: 70vw;
+ height: 1.2em;
+ line-height: 1;
+ }
+
+ .guessing-stats {
+ display: flex;
+ font-size: 3vw;
+ justify-content: center;
+ margin-top: 1ex;
+ }
+ .guessing-stat {
+ width: 1.3em;
+ }
+ .guessing-box {
+ width: 100%;
+ height: 2em;
+ position: relative;
+ }
+ .guessing-box-bar {
+ background-color: $primary;
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ }
+ .has-won .guessing-box-bar {
+ background-color: $danger;
+ }
+}