:root{
  --tile-size: 64px;
  --gap: 8px;
  --board-width: calc((var(--tile-size) * 5) + (var(--gap) * 4));
  --bg: #f0f6f5;
  --accent: #ff300c;
  --green: #6AAA64;
  --yellow: #C9B458;
  --gray: #787C7E;
  --tile-border: #111;
}

/* Reset / base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, Arial, Helvetica, sans-serif;
  background: linear-gradient(180deg,#eafaf6,#f6fff9);
  color:#111;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Centering layout */
.page-center, .game-area {
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:24px;
  gap:16px;
}

/* Title & text */
#title{
  font-size:1.6rem;
  letter-spacing:1px;
  margin:0 0 8px 0;
}
.lead{margin:0 0 16px 0; color:#334;}

/* Controls / buttons */
.controls{display:flex; gap:10px; margin-top:12px; align-items:center;}
.btn{
  display:inline-block;
  padding:10px 16px;
  background:var(--accent);
  color:white;
  text-decoration:none;
  border:none;
  border-radius:6px;
  cursor:pointer;
  font-weight:600;
}
.btn.muted{background:#e8eef0; color:#123; border:1px solid #d6dbe0;}
.small{font-size:0.85rem; opacity:0.8; margin-top:12px}

/* Board sizing & tiles */
#board{
  width:var(--board-width);
  display:grid;
  grid-template-columns:repeat(5, var(--tile-size));
  grid-template-rows:repeat(6, var(--tile-size));
  gap:var(--gap);
  align-content:center;
  margin:10px 0;
}

/* Tile */
.tile{
  width:var(--tile-size);
  height:var(--tile-size);
  border:2px solid var(--tile-border);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:1.5rem;
  text-transform:uppercase;
  background:white;
  user-select:none;
}

/* Colors for states */
.correct{ background:var(--green); color:white; border-color:transparent; }
.present{ background:var(--yellow); color:white; border-color:transparent; }
.absent{ background:var(--gray); color:white; border-color:transparent; }

/* Message */
.message{
  min-height:1.5em;
  font-weight:700;
  margin-top:6px;
  color:#0a0a0a;
}

/* Responsive tweaks */
@media (max-width:420px){
  :root{ --tile-size:52px; --gap:6px }
  #title{ font-size:1.2rem; }
}

/* Small helper for hidden element (JS toggles) */
.hidden{ display:none !important; }