/* Basic layout */
:root{
  --bg:#0f1724;
  --card:#0b1220;
  --accent:#00a3ff;
  --text:#e6eef8;
  --muted:#9fb3c8;
  --correct:#16a34a; /* green */
  --present:#f59e0b; /* yellow */
  --absent:#334155;  /* gray */
  --tile-size:64px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg,var(--bg), #071024 120%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding:24px;
}

.wrap{
  width:100%;
  max-width:760px;
  margin:auto;
  padding:24px;
}

/* Header */
.donale-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px;
}
.donale-header h1{margin:0;font-size:1.1rem}
button#new-game{
  background:transparent;
  border:1px solid rgba(255,255,255,0.06);
  color:var(--text);
  padding:8px 12px;
  border-radius:8px;
  cursor:pointer;
}

/* Board */
.board{
  display:grid;
  gap:8px;
  grid-template-rows: repeat(6, var(--tile-size));
  margin-bottom:18px;
}
.row{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:8px;
}
.tile{
  width:100%;
  height:var(--tile-size);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:1.6rem;
  letter-spacing:0.08em;
  border-radius:8px;
  background: rgba(255,255,255,0.02);
  border: 2px solid rgba(255,255,255,0.03);
  color:var(--text);
  text-transform:uppercase;
  user-select:none;
}

/* tile states */
.tile.correct{
  background:var(--correct);
  border-color: rgba(0,0,0,0.25);
  color:white;
}
.tile.present{
  background:var(--present);
  border-color: rgba(0,0,0,0.25);
  color:white;
}
.tile.absent{
  background:var(--absent);
  border-color: rgba(0,0,0,0.25);
  color:white;
}

/* keyboard */
.keyboard{
  display:flex;
  flex-direction:column;
  gap:8px;
  user-select:none;
}
.krow{display:flex; gap:6px; justify-content:center}
.key{
  padding:10px 14px;
  border-radius:6px;
  background: rgba(255,255,255,0.03);
  color:var(--text);
  border: none;
  font-weight:600;
  cursor:pointer;
  min-width:44px;
  text-transform:uppercase;
}
.key.wide{min-width:72px}
.key.correct{background:var(--correct); color:white}
.key.present{background:var(--present); color:white}
.key.absent{background:var(--absent); color:white}

/* message */
.message{
  min-height:28px;
  margin-top:12px;
  color:var(--muted);
  text-align:center;
}

/* animation */
.shake {
  animation: shake 600ms;
}
@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}

/* responsive */
@media (max-width:420px){
  :root{--tile-size:52px}
  .wrap{padding:12px}
  .key{padding:8px 10px; min-width:36px}
}