:root{
  --bg:#121212; --fg:#eee; --accent:#ffff00;
  --green:#6aaa64; --yellow:#c9b458; --gray:#787c7e;
  --border:#444; --tile-border:#888; --good:#0f0;
}

*{box-sizing:border-box}
body{
  background:var(--bg); color:var(--fg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif;
  margin:0; padding:20px;
}
h1{ color:var(--accent); margin: 0 0 10px }

.container{ max-width: 880px; margin: 0 auto }

input, button{
  font-size: 18px; margin: 5px; padding: 6px 10px;
  background: #1d1d1d; color: var(--fg); border:1px solid var(--border); border-radius:8px;
}
button{ cursor:pointer }
button:hover{ filter:brightness(1.1) }

.wordbox{ font-weight:700; font-size:24px; color:var(--good) }

table{
  margin-top: 15px; border-collapse: collapse; width: 100%;
}
th, td{
  padding: 6px 8px; text-align:left; border-bottom: 1px solid var(--border);
}
th{ color: var(--good) }

.info-box{ margin-top: 10px; font-size: 16px }

.loading{
  position: fixed; inset: 0;
  background: #000; color: var(--good); font-size: 22px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 9999; text-align: center; line-height: 1.6;
  font-family: "Courier New", Courier, monospace;
}

.tiles{ margin: 10px 0 }
.tile{
  width: 44px; height: 44px; display:inline-grid; place-items:center;
  font-size: 22px; font-weight: 800; border:2px solid var(--tile-border);
  margin: 2px; cursor: pointer; user-select: none; border-radius: 8px;
}
.tile.G{ background: var(--green); color: #fff }
.tile.Y{ background: var(--yellow); color: #fff }
.tile.B{ background: var(--gray); color: #fff }

.actions{ margin-top: 6px }