:root{
  --bg: #ffffff;
  --tile-border: #d1d5db;
  --tile-bg: #ffffff;
  --tile-text: #000000;
  --green: #6aaa64;
  --yellow: #c9b458;
  --gray: #787c7e;
  --keyboard-gray: #d3d6da;
  --kbd-dark: #6b7280;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: #111827;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 20px 20px 20px;
}

.topbar {
  width: 100%;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  padding: 8px 12px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}

.topbar-icon {
  height: 40px;
  width: 145px;
  cursor: pointer;
}

.new-game-btn {
  padding: 10px 20px;
  border: 1px solid #333;
  border-radius: 25px;
  background: white;
  cursor: pointer;
  font-weight: bold;
  color: black;
  transition: filter 0.2s;
  margin-left: auto;
  -webkit-tap-highlight-color: transparent;
  margin-right: 60px;
}

.container {
  width: min(320px, 92vw);
  display: flex;
  flex-direction: column;
  gap: 25px;
  align-items: center;
}

.board {
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  gap: 5px;
  width: 100%;
}

.row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}

.tile {
  aspect-ratio: 1/1;
  border-radius: 0;
  border: 2px solid var(--tile-border);
  background: var(--tile-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  font-size: clamp(24px, 4.5vw, 28px);
  color: var(--tile-text);
  text-transform: uppercase;
  user-select: none;
  transform-style: preserve-3d;
}

.tile.filled { border-color: #888A8C; }
.tile.green  { background: var(--green);  color: #ffffff; border-color: var(--green); }
.tile.yellow { background: var(--yellow); color: #ffffff; border-color: var(--yellow); }
.tile.gray   { background: var(--gray);   color: #ffffff; border-color: var(--gray); }

.keyboard {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  user-select: none;
}

.krow {
  display: flex;
  gap: 2px;
  justify-content: center;
}

.key {
  padding: 15px 10px;
  min-width: 40px;
  min-height: 55px;
  border-radius: 6px;
  background: var(--keyboard-gray);
  color: #111827;
  font-weight: 600;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: none;
  box-shadow: none;
  font-size: 17px;
}

.key.big { min-width: 64px; padding-left: 14px; padding-right: 14px; min-height: 50px; font-size: 12px; }
.key[data-key="enter"] { font-size: 12px; }
.key[data-key="back"]  { font-size: 16px; }

.key.green  { background: var(--green);  color: #fff; }
.key.yellow { background: var(--yellow); color: #fff; }
.key.dark   { background: var(--kbd-dark); color: #fff; }

.status { min-height: 22px; font-size: 14px; color: #374151; text-align: center; }

.small-note { color: #6b7280; margin-top: 6px; }

@media (max-width: 420px) {
  .key { padding: 12px 8px; min-width: 34px; min-height: 40px; font-size: 13px; }
  .key.big { min-width: 60px; min-height: 40px; }
}

/* flip animation */
.tile.flip { animation: flip 600ms ease forwards; }
@keyframes flip {
  0%   { transform: rotateX(0deg); }
  50%  { transform: rotateX(90deg); }
  100% { transform: rotateX(0deg); }
}