/* ----------- base layout ----------- */
body{
  margin:0;
  font-family:system-ui,sans-serif;
  background:#eee;
  text-align:center;
  touch-action:none;          /* stop double-tap zoom */
  -webkit-user-select:none;
  user-select:none;
}

#game-container{
  display:flex;
  justify-content:center;
  gap:20px;
  margin:20px auto;
}

#canvasCol{
  display:flex;
  flex-direction:column;
  align-items:center;
}

canvas{
  background:#fff;
  border:3px solid #333;
}

/* ----------- on-screen arrows ----------- */
#controls{
  margin-top:10px;
}

#controls button{
  font-size:28px;
  width:60px;
  height:60px;
  margin:4px;
  cursor:pointer;
}

/* ----------- right panel ----------- */
#sidePanel{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:15px;
}

#buttonBar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

#buttonBar button{
  font-size:18px;
  padding:8px 16px;
  cursor:pointer;
}

#statBox{
  font-size:18px;
  line-height:1.6;
  background:#fafafa;
  padding:10px 16px;
  border:2px solid #333;
  border-radius:6px;
}

/* ----------- mobile tweaks ----------- */
@media(max-width:600px){
  #game-container{
    flex-direction:column;
    align-items:center;
  }
  /* scale canvas to 90 % width, keep aspect with CSS */
  canvas{
    width:90vw;
    height:auto;
  }
  #sidePanel{
    flex-direction:row;
    gap:20px;
    flex-wrap:wrap;
    justify-content:center;
  }
  #controls button{
    width:64px;
    height:64px;
    font-size:32px;
  }
}