:root{
  --bg:#fafafa;
  --bg-alt:#ffffff;
  --text:#222222;
  --text-muted:#555555;
  --border-color:#dddddd;
  --accent-green:#2e7d32;
  --accent-brown:#6d4c41;
  --shadow:0 2px 4px rgba(0,0,0,.1);
}
*, *::before, *::after{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.6;
  color:var(--text);
  background-color:var(--bg);
  animation:fadeIn .8s ease-out forwards;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}

/* Header */
header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1rem;
  background:var(--bg-alt);
  position:sticky;
  top:0;
  z-index:1000;
  border-bottom:1px solid var(--border-color);
}
header h1{font-size:1.5rem;margin:0}
nav ul{
  display:flex;
  gap:1.5rem;
  list-style:none;
  margin:0;
  padding:0;
}
nav a{
  font-weight:500;
  transition:color .2s;
}
nav a:hover{color:var(--accent-green)}

/* Main container */
main{
  max-width:1200px;
  margin:0 auto;
  padding:2rem 1rem;
}

/* Hero */
.hero{
  text-align:center;
  padding:4rem 1rem;
}
.hero h1{
  font-size:2.5rem;
  margin-bottom:.5rem;
}
.tagline{
  font-size:1.2rem;
  color:var(--text-muted);
  margin-bottom:1.5rem;
}

/* Buttons */
.btn{
  display:inline-block;
  padding:.75rem 1.5rem;
  border:none;
  border-radius:.5rem;
  cursor:pointer;
  font-size:1rem;
  transition:background-color .2s,transform .1s;
  margin:.5rem;
}
.btn-primary{
  background:var(--accent-green);
  color:#fff;
}
.btn-primary:hover{background:#256028}
.btn-secondary{
  background:var(--accent-brown);
  color:#fff;
}
.btn-secondary:hover{background:#5a3e33}
.theme-toggle{
  background:none;
  border:none;
  cursor:pointer;
  font-size:1.5rem;
  padding:0.5rem;
}

/* Card layout */
.preview-cards{
  display:grid;
  gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin:2rem 0;
}
.card{
  background:var(--bg-alt);
  border-radius:.5rem;
  padding:1.5rem;
  box-shadow:var(--shadow);
  transition:transform .2s;
}
.card:hover{transform:translateY(-4px)}

/* Game board */
.game-board{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:.5rem;
  width:100%;
  max-width:400px;
  margin:2rem auto;
}
.cell{
  aspect-ratio:1;
  background:var(--bg-alt);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2rem;
  border-radius:.3rem;
  border:2px solid var(--border-color);
  transition:background-color .2s,transform .1s;
  cursor:pointer;
}
.cell:hover{
  background:var(--accent-green);
  color:#fff;
  transform:scale(1.05);
}
.cell:active{transform:scale(.95)}
.cell.obstacle{opacity:.5;cursor:not-allowed}
.cell.start,.cell.end{border-color:var(--accent-brown);border-width:3px}
.cell.trail{background:var(--accent-green);color:#fff}
.cell.current{background:var(--accent-brown);color:#fff}

/* Game info */
.info-panel{
  display:flex;
  justify-content:space-around;
  margin:1rem;
  padding:1rem;
  background:var(--bg-alt);
  border-radius:.5rem;
  text-align:center;
}
.game-controls{
  text-align:center;
  margin:1rem 0;
}
.game-controls button{margin:.25rem}
#gameStatus{
  text-align:center;
  padding:1rem;
  font-weight:bold;
  color:var(--accent-green);
}
.help-text{
  text-align:center;
  color:var(--text-muted);
  font-style:italic;
}

/* Forms */
input,textarea,select{
  width:100%;
  padding:.75rem;
  border:1px solid var(--border-color);
  border-radius:.3rem;
  background:var(--bg);
  color:var(--text);
  font:inherit;
  transition:border-color .2s;
}
input:focus,textarea:focus,select:focus{
  outline:none;
  border-color:var(--accent-green);
  box-shadow:0 0 0 2px rgba(46,125,50,.2);
}

/* Footer */
footer{
  text-align:center;
  padding:2rem 1rem;
  font-size:.9rem;
  color:var(--text-muted);
  background:var(--bg-alt);
  border-top:1px solid var(--border-color);
}

/* Focus visible */
:focus-visible{
  outline:2px solid var(--accent-green);
  outline-offset:2px;
}

/* Animations */
@keyframes fadeIn{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:translateY(0);}
}

/* Error page */
.error-page{
  text-align:center;
  padding:4rem 1rem;
}

/* Responsive */
@media (max-width:390px){
  .hero h1{font-size:2rem;}
  nav ul{gap:1rem;font-size:.9rem;}
  .preview-cards{grid-template-columns:1fr;}
  .game-board{width:90%;}
  header{flex-direction:column;gap:0.5rem}
  nav ul{flex-direction:column;gap:0.5rem}
}
@media (min-width:1280px){
  .hero{padding:6rem 2rem;}
  .preview-cards{grid-template-columns:repeat(3,1fr);}
}

/* Dark theme */
@media (prefers-color-scheme:dark){
  :root{
    --bg:#1e1e1e;
    --bg-alt:#2a2a2a;
    --text:#e0e0e0;
    --text-muted:#a0a0a0;
    --border-color:#444;
    --accent-green:#4caf50;
    --accent-brown:#8d6e63;
  }
}