Screen {
  background: #ffffff;
  overflow-x: hidden;
}

Footer {
  background: #f8dc24;
}
Footer > .footer--highlight {
  background: #f8dc24;
}

Footer > .footer--highlight-key {
  background: black;
  color: white;
  text-style: bold;
}

Footer > .footer--key {
  text-style: bold;
  /* color: white; */
  background: #f8dc24;
}

#main {
  layout: vertical;
  overflow: hidden;
}

/* Splash */

.splash-part {
  opacity: 1;
}

Splash {
  background: #f8dc24;
}

.first {
  margin-top: 2;
}

.second {
  margin-bottom: 2;
}

.title {
  text-align: center;
  color: black;
  text-style: bold;
}

.subtitle {
  text-align: center;
  color: black;
}

#play {
  width: 8;
  max-width: 8;
  background: #f8dc24;
  opacity: 1;
  border: round black;
}

/* Status */

Status {
  layout: horizontal;
  height: 1;
  border: none;
  margin: 0;
  /* background: black; */
}

#status-string {
  dock: left;
  width: 10;
  margin-left: 1;
  text-align: left;
  color: black;
  text-style: bold;
}

#point-progress-bar {
  dock: right;
  width: 30;
  margin-right: 1;
  text-align: right;
  color: black;
  text-style: bold;
}

/* Already guessed */
#recent-words {
  width: 100%;
  margin-left: 1;
  margin-right: 1;
  border: round #dedede;
  /* background: black; */
  background: #ffffff;
  text-align: left;
  content-align: left top;
}

.full-recent-words {
  height: 100%;
}

/* Feedback */

#feedback {
  text-align: center;
  text-style: bold;
  /* margin: 1 0; */
  /* color: black; */
  width: 9;
  /* tint: white 90%; */
}

.feedback-black {
  /* border: round black; */
  background: black;
  color: white;
}

.feedback-white {
  /* border: round #f3da25; */
  background: white;
  color: black;
}

/* Current letters */

#current-letters {
  /* margin-top: 1; */
  margin-bottom: 1;
  text-align: center;
  text-style: bold;
  color: black;
}

/* Board */

BeeBoard {
  layout: grid;
  grid-size: 3;
  grid-gutter: 0 0;
  grid-columns: 1fr;
  grid-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  margin: 1 20;
  height: 9;
  width: 21;
}

Button {
  border: hidden white;
}

Button.-active {
  tint: #d9d9d9 30%;
}

Button:focus {
  text-style: bold;
}

.hive-placeholder {
  row-span: 1;
  width: 100%;
  height: 100%;
  border: none;
  background: #fff;
  visibility: hidden;
}

.hive-inner {
  row-span: 2;
  width: 100%;
  height: 100%;
  background: #f3da25;
}

.hive-outer {
  row-span: 2;
  width: 100%;
  height: 100%;
  border: none;
  background: #e4e4e4;
}

.hive-inner.-active {
  background: #f3da25;
  tint: #d9d9d9 0%;
  border: hkey white;
}

.hive-outer.-active {
  background: #d9d9d9;
  tint: #d9d9d9 0%;
  border: hkey white;
}

/* Controls */

Controls {
  dock: bottom;
  layout: horizontal;
  height: 4;
  margin: 1;
  width: 28;
}

.hide {
  display: none;
}

.controls {
  border: round #dedede;
  background: #ffffff;
}

#delete {
  dock: left;
  max-width: 10;
  margin-right: 2;
}

#shuffle {
  max-width: 5;
}

#enter {
  dock: right;
  text-align: center;
  max-width: 9;
  margin-left: 2;
}

/* Button.-active {
  tint: #fff 0%;
} */
